-
-
Save vijo/cfcb219ba8b9eb3f7574 to your computer and use it in GitHub Desktop.
If you are concerned about web site performance, you probably noticed that embedded YouTube iframes are costly. Instead of iframes, you may embed images that link to the respective videos, and make these links replace themselves with iframes when clicked. (IE 9+ because of getElementsByClassName.)
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
/*jshint maxlen: 79 */ | |
var MYSITE = {}; | |
/** | |
* Make YouTube links with .yt-embed replace themselves with YouTube | |
* iframes when clicked; firstElementChild is assumed to be the | |
* img element holding the poster frame; the YouTube URL must contain | |
* the "v" parameter and no further parameters. | |
* | |
* @param {Document} d The window.document object. | |
*/ | |
MYSITE.yt_embed = function (d) { | |
'use strict'; | |
var el, | |
els = d.getElementsByClassName('yt-embed'), | |
i, | |
max; | |
var replace_with_iframe = function (event) { | |
var iframe = d.createElement('iframe'), | |
video_id = event.currentTarget.href.split('=')[1]; | |
iframe.width = event.currentTarget.firstElementChild.width; | |
iframe.height = event.currentTarget.firstElementChild.height; | |
iframe.setAttribute('allowfullscreen', true); | |
iframe.src = 'https://www.youtube-nocookie.com/embed/' + | |
video_id + | |
'?autoplay=true'; | |
event.currentTarget.parentElement.replaceChild( | |
iframe, event.currentTarget | |
); | |
event.preventDefault(); | |
}; | |
for (i = 0, max = els.length; i < max; i++) { | |
el = els[i]; | |
el.addEventListener("click", replace_with_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
var MYSITE={yt_embed:function(d){"use strict";var e,f=d.getElementsByClassName("yt-embed"),a,g,h=function(b){var c=d.createElement("iframe"),a=b.currentTarget.href.split("=")[1];c.width=b.currentTarget.firstElementChild.width;c.height=b.currentTarget.firstElementChild.height;c.setAttribute("allowfullscreen",!0);c.src="https://www.youtube-nocookie.com/embed/"+a+"?autoplay=true";b.currentTarget.parentElement.replaceChild(c,b.currentTarget);b.preventDefault()};a=0;for(g=f.length;a<g;a++)e=f[a],e.addEventListener("click",h)}}; |
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
<style> | |
iframe { border: 0; } | |
</style> | |
<a href="https://www.youtube.com/watch?v=VIDEOID" class=yt-embed> | |
<img src=poster.jpg alt="YouTube video" width=320 height=180> | |
</a> | |
<script src=yt-embed.min.js></script> | |
<script> | |
MYSITE.yt_embed(window.document); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment