app/assets/javascripts/youtube_videos.js
"use strict";
$(document).on('turbolinks:load', function() {
$(".youtube").each(function() {
var id = $(this).data('id');
// Based on the YouTube ID, we can easily find the thumbnail image
$(this).css('background-image', 'url(http://i.ytimg.com/vi/' + id + '/sddefault.jpg)');
// Overlay the Play icon to make it look like a video player
$(this).append($('<div/>', {'class': 'play'}));
$(document).delegate('#'+this.id, 'click', function() {
// Create an iFrame with autoplay set to true
var iframe_url = "https://www.youtube.com/embed/" + id + "?autoplay=1&autohide=1";
if ($(this).data('params')) {
iframe_url += '&' + $(this).data('params');
}
// The height and width of the iFrame should be the same as parent
var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() });
// Replace the YouTube thumbnail with YouTube HTML5 Player
$(this).replaceWith(iframe);
});
});
});