-
-
Save egfx/3248e6f846033cfee5d8ed4b37b8fa0b to your computer and use it in GitHub Desktop.
YouTube Embed Optimized with JavaScript
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="QDZnoEHp5ss" style="width:500px;height:281px;"></div> | |
<p class="p">Does this look right to you?</p> |
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 + "?&autohide=1&start=63&end=82&autoplay=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); | |
} | |
} | |
}); |
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
#kmart-youtube { | |
text-align: center; | |
background-color: #1D1F20; | |
color: white; | |
} | |
#kmart-youtube a, a:visited { | |
color: white; | |
} | |
#kmart-youtube .youtube { | |
background-position: center; | |
background-repeat: no-repeat; | |
position: relative; | |
display: block; | |
overflow: hidden; | |
transition: all 200ms ease-out; | |
cursor: pointer; | |
margin: 40px auto 0 auto; | |
} | |
#kmart-youtube iframe { | |
margin: 40px auto 0 auto; | |
} | |
#kmart-youtube .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); | |
-webkit-transition: all 0.2s ease-out; | |
-moz-transition: all 0.2s ease-out; | |
-o-transition: all 0.2s ease-out; | |
transition: all 0.2s ease-out; | |
} | |
#kmart-youtube .youtube .play:hover { | |
opacity: 1; | |
filter: alpha(opacity=100); | |
} | |
#kmart-youtube .p { | |
margin-top: 60px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment