Created
August 20, 2016 20:23
-
-
Save overstrides/5e30225a50bb49b41e7e668153663c8f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The HTML | |
The HTML code sets the YouTube video ID, styles the video size (width and height), and lists the Youtube URL parameters if needed. | |
The CSS | |
In the two videos used as examples, the picture ratio is 16:9, which returns the sddefault.jpg thumbnail with horizontal black bands. To hide them when showing this thumbnail, the background-position property is set with the center value, while setting the picture size inlined in the HTML div tag, like style="width:500px;height:281px;". This way, it is possible to show different video sizes on the same page. | |
The play icon, which tells the users the content is not a mere picture, is added in a layer on top of the thumbnail with an opacity transition to highlight it. We are using a data URI base64-encoded png here (from IconFinder), which saves an HTTP request and works down to IE8. | |
Vanilla JavaScript Implementation | |
With no dependency and the fastest implementation, the vanilla JavaScript version uses the smallest DOM ready code I could find. | |
Browser differences still have to be taken into account, like the lack of support for the getElementsByClassName method in IE8. | |
The jQuery Implementation | |
While being more expressive to my eyes and with wider browser support, the jQuery implementation comes with the price of the whole jQuery library and slightly slower performance. | |
https://www.sitepoint.com/faster-youtube-embeds-javascript/ | |
http://www.languagesandnumbers.com/articles/en/The-Canticles-of-Holy-Mary-and-the-Galician-Portuguese-language/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="youtube" | |
id="fsrJWUVoXeM" | |
style="width: 500px; height: 281px;"> | |
</div> | |
<div class="youtube" | |
id="lR4tJr7sMPM" | |
data-params="modestbranding=1&showinfo=0&controls=0&vq=hd720" | |
style="width: 640px; height: 360px;"> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict"; | |
$(function() { | |
$(".youtube").each(function() { | |
// Based on the YouTube ID, we can easily find the thumbnail image | |
$(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.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/" + this.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); | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.youtube { | |
background-position: center; | |
background-repeat: no-repeat; | |
position: relative; | |
display: inline-block; | |
overflow: hidden; | |
transition: all 200ms ease-out; | |
cursor: pointer; | |
} | |
.youtube .play { | |
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAERklEQVR4nOWbTWhcVRTHb1IJVoxGtNCNdal2JYJReC6GWuO83PM/59yUS3FRFARdFlwYP1CfiojQWt36sRCUurRIdVFXIn41lAoVdRGrG1M01YpKrWjiYmaSl8ybZJL3cd+YA//NLObd3++eO8x79z5jSq5Gw+8kov0AP8vMR5l1BtBZQM4B8ks75wCdZdYZZj5qLZ4hov2Nht9Z9vhKKSIaB/gI4M4w62KeAO6Mte4lYOq20FxrlqqOibhHmeWbvNC9ZfDX1mLae391aN6limO/gwgvAPJbWeAZuSDingdwXTBw7/0IsyaA/Fkh+KqOkD+YNfHej1QKD+y7iVlOhgLvFqFfNJvNGyuBJ+KDAF8MDd0tgS8y64OlgSdJMsysL4cG7SOHkyQZLhTee7+d2R2rAVy/S+Jd7/32ouBHAP4gNNRGQyTHc/84NhqNywZp5rvjjnnvt21aABFeCQ+RLwAf2hQ8s7sv9OCLk6AHNgQvIrvbfzKCD76g/O6cu7lf/iER/aQGgy448pExZmhdegAPhR9sObFWH1gT3lp7DaA/5bkIgJhZPgsNmz02novj+KqeApj1ubwXWe4kdyeznAgNvTpE/HQmvKqOMeuFogTUVQSRno+iaLRLAJF7uIgL9O4ubgL8aWgB7S44mNX+35YpICUiAvS9sBLkq1WzT+NFffl6AuoiApi6NT37h6sWkBIRZGkQ8YtLgyji6e1mBYTqCEBPG2Naz+0BWQgtoGoRgCzEsd9hAN1X5BfnFZASUfrSAFQNsyZ1FJASUVpHiLinDJG8U2cBZYogkrcNs5waBAGdstbeU9zdqpw0gPwwSAI6VUxHyFlDpOcHUUBBIuYNs14aZAE5RVwyzPr3/0EAEY0TyfGNjBWQvwZ +CTSbehfAH29mrID8bET0+0EUkAd8WYDOmqJ3ecsG30yr9wqRfm6Y+a1BEFDEjHfHvWmY9ck6CygHvBVr8Xhtb4ZE5HZA3y8DvBNA1TjnrmXWf+sioMwZX5V/VHXMGGMMoKdDCxCRvRWBdzKzdHEO+EisilbPyopHYqp6S9UCAsz4iojI7hUDAtyXVQgIDd6KnOoaWNkbI6FaPSuZGyMArsi7MZoloB4zviI/Nhr3X95jltwTRQmoIfgisy5ai+me67OI7fE4nrqjrqfK1t0eby0FPRB6oGVlchL3rgnfrq19RKbVBdhV9IOSwJmfmJi4vi/4ThERitwyCxVAFqydshuCX5awhQ9KtmuIWd8IDZED/nXT77rvVVv6sHRKwjYi91poqP7Dr+Y6JJ1VSZIMA3wkPNy6bX+o8Bcm0sXMdwM8Fxo0A3xORPaWBp6uPXsmbxCRD0NDL0dOANhVCXy6iAjMcjbcrMt3RITKwdMVRdFo+y5yvkL4eWZ+zHt/ZVD4dEVRNGotpst+dZZZH8k86lqn2pIvT/eqrNfn2xuyqYPZ8mv7s8pfn/8Pybm4TIjanscAAAAASUVORK5CYII=") no-repeat center center; | |
background-size: 64px 64px; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
opacity: .8; | |
filter: alpha(opacity=80); | |
transition: all 0.2s ease-out; | |
} | |
.youtube .play:hover { | |
opacity: 1; | |
filter: alpha(opacity=100); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()} | |
r(function(){ | |
if (!document.getElementsByClassName) { | |
// IE8 support | |
var getElementsByClassName = function(node, classname) { | |
var a = []; | |
var re = new RegExp('(^| )'+classname+'( |$)'); | |
var els = node.getElementsByTagName("*"); | |
for(var i=0,j=els.length; i<j; i++) | |
if(re.test(els[i].className))a.push(els[i]); | |
return a; | |
} | |
var videos = getElementsByClassName(document.body,"youtube"); | |
} else { | |
var videos = document.getElementsByClassName("youtube"); | |
} | |
var nb_videos = videos.length; | |
for (var i=0; i<nb_videos; i++) { | |
// Based on the YouTube ID, we can easily find the thumbnail image | |
videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)'; | |
// Overlay the Play icon to make it look like a video player | |
var play = document.createElement("div"); | |
play.setAttribute("class","play"); | |
videos[i].appendChild(play); | |
videos[i].onclick = function() { | |
// Create an iFrame with autoplay set to true | |
var iframe = document.createElement("iframe"); | |
var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1"; | |
if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params"); | |
iframe.setAttribute("src",iframe_url); | |
iframe.setAttribute("frameborder",'0'); | |
// The height and width of the iFrame should be the same as parent | |
iframe.style.width = this.style.width; | |
iframe.style.height = this.style.height; | |
// Replace the YouTube thumbnail with YouTube Player | |
this.parentNode.replaceChild(iframe, this); | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment