/**
* html
*
* <div class="video" data-video="{id}"><a href="{url}">{title}</a></div>
*
*/
/**
* Videos
*
* @player Supported Platforms: YouTube, Vimeo
* @wrapper <div class="videos">
* @item <div data-video="{id}"><a href="{url}">
* @output <iframe>
*/
$(function() {
$('[data-video]').each(function(){
var videoId = $(this).data('video');
if(videoId.length == 11) {
var videoType = 0; // YouTube
} else {
var videoType = 1; // Vimeo
}
// Insert Thumbnail into div.video[data-video="{id}"]
if(videoType == 0) {
// YouTube
$(this).html('<a target="_blank" data-player="youtube" data-video="' + videoId + '" class="triggerVideo" href="https://youtube.com/watch?v=' + videoId + '"><img src="https://i.ytimg.com/vi/' + videoId + '/maxresdefault.jpg"/></a>');
}
else if (videoType == 1) {
// Vimeo
$.getJSON('https://www.vimeo.com/api/v2/video/' + videoId + '.json?callback=?', {format: "json"}, function(data) {
var vimeoThumbnail = data[0].thumbnail_large;
$('.video[data-video="' + videoId + '"]').html('<a target="_blank" data-player="vimeo" data-video="' + videoId + '" class="triggerVideo" href="https://vimeo.com/' + videoId + '"><img src="' + vimeoThumbnail + '"/></a>');
});
}
// Trigger click event on .video
$('.videos').on('click','.video a.triggerVideo',function(e) {
e.preventDefault();
var videoId = $(this).data('video');
var player = $(this).data('player')
if(player == 'youtube') {
// YouTube
$(this).parent().html('<iframe id="ytplayer" type="text/html" width="1920" height="1080" src="https://www.youtube-nocookie.com/embed/' + videoId + '?rel=0&autoplay=true&showinfo=0&color=white&theme=light&autoplay=false" frameborder="0" allowfullscreen></iframe>');
}
else if (player == 'vimeo') {
// Vimeo
$(this).parent().html('<iframe src="https://player.vimeo.com/video/' + videoId + '?portrait=0&autoplay=true&title=0&byline=0&badge=0" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
}
});
});
});
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.