First of all get all video attachements of the post or page:
<?php $attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'video') );
if ( $attachments ) { ?>
2nd: Load the videos into the playlist code with a unique ID (http://docs.sublimevideo.net/beta/playlists). Here I do use the attachement ID for each video and of cause the same for the thumbnail. You have to change the width and height within the <video> code.
<div id="playlist1" class="sv_playlist">
<?php
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'video',
'numberposts' => null,
'post_status' => null,
'orderby' => 'title',
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
echo '<div class="video_wrap">';
echo '<video width="568" height="320" id="video';
echo $attachment->ID;
echo '" data-settings="autoresize:fit" poster="';
echo '" preload="true">';
echo '<source src="';
echo wp_get_attachment_url ($attachment->ID);
echo '" /></video>';
echo '</div>';
}
}?>
<ul class="thumbs">
<?php
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'video',
'numberposts' => null,
'post_status' => null,
'orderby' => 'title',
'post_parent' => $post->ID
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
echo '<li style="padding:0px;" id="thumbnail_video';
echo $attachment->ID;
echo '"> <a href=" "> <img style="height:100%" alt="" src="';
echo wp_get_attachment_url( get_post_thumbnail_id($post->ID));
echo '" width="144" height="71" /> <span class="play" /> </a> </li>';
}
}
?>
</ul>
</div>
3rd: Well that’s done. Now I wanted to have the videos responsive to allow resizing it for mobile devices. Here the SublimeVideo-Team helped me. Please add the following style to your stylesheet:
/* VIDEO PLAYER!! */
/* Thumbnails below the video */
img {border:none;}
.sv_playlist .video_wrap {
width: 100%;
height: auto;
display:none;
background:#fff;
-moz-box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
-webkit-box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
box-shadow:rgba(0,23,60,0.5) 0 4px 17px;
}
.sv_playlist .video_wrap.active {
display:block;
}
.sv_playlist ul.thumbs {
list-style-type:none;
width:800px;
overflow:hidden;
margin:20px auto;
}
.sv_playlist li {
float:left;
display:block;
width:144px;
height:81px;
margin:0 19px 19px 0;
background:#000;
border:1px solid #000;
-moz-box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
-webkit-box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
box-shadow:rgba(0,23,60,0.5) 0 2px 10px;
}
.sv_playlist li.active {
border-color:#fff;
}
.sv_playlist li a {
display:block;
position:relative;
}
.sv_playlist li a span.play {
display:block;
width:144px;
height:81px;
/* you can find the play icon here: http://f.cl.ly/items/3M0u0p0i0k1l3S0v2b1G/playlist_play_icon.png */
background:url('http://f.cl.ly/items/3M0u0p0i0k1l3S0v2b1G/playlist_play_icon.png') no-repeat center;
background-color:rgba(0,0,0,0.6);
position:absolute;
top:0;
left:0;
-moz-box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
-webkit-box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
box-shadow:inset rgba(255,255,255,0.3) 0 1px 0;
-o-transition:background-color,0.25s,linear;
-moz-transition:background-color,0.25s,linear;
-webkit-transition:background-color,0.25s,linear;
transition:background-color,0.25s,linear;
}
.sv_playlist li a:hover span.play {
background-color:rgba(0,0,0,0);
}
.sv_playlist li.active a span.play {
background:none;
}
The fluid width is defined here (you copied it already!):
.sv_playlist .video_wrap {
width: 100%;
height: auto; }
Last but not least: Add the JavaScript code as seen at the documentation (http://docs.sublimevideo.net/beta/playlists):
<script>
/** http://docs.sublimevideo.net/playlists **/
/** jQuery version **/
var SublimeVideo = SublimeVideo || { playlists: {} };
jQuery(document).ready(function() {
// A SublimeVideoPlaylist instance can takes some options:
// - autoplayOnPageLoad: whether or not to autoplay the playlist on page load. Note that if you set it to true,
// you should remove the 'sublime' class from the first video in the playlist.
// - loadNext: whether or not to load the next item in the playlist once a video playback ends
// - autoplayNext: whether or not to autoplay the next item in the playlist once a video playback ends
// - loop: whether or not to loop the entire playlist once the last video playback ends
var playlistOptions = { autoplayOnPageLoad: false, loadNext: true, autoplayNext: true, loop: false };
// Automatically instantiate all the playlists in the page
jQuery('.sv_playlist').each(function(i, el) {
SublimeVideo.playlists[el.id] = new SublimeVideoPlaylist(el.id, playlistOptions);
});
});
var SublimeVideoPlaylist = function(playlistWrapperId, options){
if (!jQuery("#" + playlistWrapperId)) return;
this.options = options;
this.playlistWrapperId = playlistWrapperId;
this.firstVideoId = jQuery("#" + this.playlistWrapperId + " video").attr("");
this.setupObservers();
this.updateActiveVideo(this.firstVideoId);
};
jQuery.extend(SublimeVideoPlaylist.prototype, {
setupObservers: function() {
var that = this;
jQuery("#"+ this.playlistWrapperId + " li").each(function() {
jQuery(this).click(function(event) {
event.preventDefault();
if (!jQuery(this).hasClass("active")) {
that.clickOnThumbnail(jQuery(this).attr("id"), that.options['autoplayNext']);
}
});
});
},
reset: function() {
// Hide the current active video
jQuery("#" + this.playlistWrapperId + " .video_wrap.active").removeClass("active");
// Get current active video and unprepare it
// we could have called sublimevideo.unprepare() without any arguments, but this is faster
sublimevideo.unprepare(jQuery("#" + this.activeVideoId)[0]);
// Deselect its thumbnail
this.deselectThumbnail(this.activeVideoId);
},
clickOnThumbnail: function(thumbnailId, autoplay) {
this.updateActiveVideo(thumbnailId.replace(/^thumbnail_/, ""));
if (autoplay) { // And finally, prepare and play it if autoplay is true
sublimevideo.prepareAndPlay(jQuery("#" + this.activeVideoId)[0]);
} else { // Or only prepare it if autoplay is false
sublimevideo.prepare(jQuery("#" + this.activeVideoId)[0]);
}
},
selectThumbnail: function(videoId) {
jQuery("#thumbnail_" + videoId).addClass("active");
},
deselectThumbnail: function(videoId) {
jQuery("#thumbnail_" + videoId).removeClass("active");
},
updateActiveVideo: function(videoId) {
// Basically undo all the stuff and bring it back to the point before js kicked in
if (this.activeVideoId) this.reset();
// Set the new active video
this.activeVideoId = videoId;
// And show the video
this.showActiveVideo();
},
showActiveVideo: function() {
// Select its thumbnail
this.selectThumbnail(this.activeVideoId);
// Show it
jQuery("#" + this.activeVideoId).parent().addClass("active");
},
handleAutoNext: function(newVideoId) {
this.clickOnThumbnail(newVideoId, this.options['autoplayNext']);
}
});
sublimevideo.ready(function() {
for (var playlistId in SublimeVideo.playlists) {
SublimeVideo.playlists[playlistId].clickOnThumbnail(SublimeVideo.playlists[playlistId].activeVideoId, SublimeVideo.playlists[playlistId].options['autoplayOnPageLoad']);
}
sublimevideo.onEnd(function(sv) {
var matches = sv.element.id.match(/^video([0-9]+)$/);
if (matches !== undefined) {
var playlistId = jQuery(sv.element).parents('.sv_playlist').attr("id");
var nextThumbnail = jQuery("#thumbnail_" + sv.element.id).next("li");
if (nextThumbnail.length > 0) {
if (SublimeVideo.playlists[playlistId].options['loadNext']) {
SublimeVideo.playlists[playlistId].handleAutoNext(nextThumbnail.attr("id"));
}
}
else if (SublimeVideo.playlists[playlistId].options['loop']) {
SublimeVideo.playlists[playlistId].updateActiveVideo(SublimeVideo.playlists[playlistId].firstVideoId);
SublimeVideo.playlists[playlistId].handleAutoNext(SublimeVideo.playlists[playlistId].activeVideoId);
}
else { sublimevideo.stop(); }
}
});
});
</script>
That’s it. I hope it helps anyone who starts get get lost with this, too!