Skip to content

Instantly share code, notes, and snippets.

@wayferer
Last active September 11, 2015 21:47
Show Gist options
  • Save wayferer/8810387 to your computer and use it in GitHub Desktop.
Save wayferer/8810387 to your computer and use it in GitHub Desktop.
youtube video load with custom image (with youtube image fallback) and custom playbutton with fallback for touch devices. Needs to be optimized / done better. relies on my helper.js
<div class="fluidVidContainer">
<div class="fluidVidContainer-overlay">
<img src="<%= asset_path('video-overlay-theroadtolife.png') %>" alt="" class="video-thumb">
<button class="btn_play js-youtubePlay" data-ytID="ScMzIvxBSi4">
<span class="icon icon-play"><i class="fa fa-play"></i></span>
<span class="video-title">The Road to Life?<span class="video-duration">3 min 7 sec</span></span>
</button>
</div>
</div>
function loadVideo(){
if (zQ('.js-youtubePlay')) {
var player;
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
tag.onload=doYT;
}
}
function doYT() {
if(YT && YT.Player){
ytPlayBtn = zQ('.js-youtubePlay');
ytID = ytPlayBtn.getAttribute('data-ytID');
vidContainer = zQ('.fluidVidContainer');
vidOverlay = zQ('.fluidVidContainer-overlay');
var YouTubeVideo=document.createElement('div');
YouTubeVideo.id="YouTubeVideo";
vidContainer.insertBefore(YouTubeVideo, vidOverlay);
player=new YT.Player('YouTubeVideo',{
width:980,
height:551,
videoId:ytID,
playerVars:{'showinfo':0,'modestbranding':1,'rel':0,'loop':0,'wmode':'opaque','controls':2,'playsinline':1,'autoplay':0},
events:{
'onReady':onPlayerReady
}
});
}else{
setTimeout(doYT, 100);
}
}
function onPlayerReady(){
player.stopVideo();
if(zQ('.notouch')){
zBindEvent(ytPlayBtn,'click',function(){
zAddClass(vidContainer, 'is-playing');
player.playVideo();
})
}
}
<figure class="videoContainer" data-ytid="sFZvTGLyv-E" data-placeholderimage="http://img.youtube.com/vi/sFZvTGLyv-E/maxresdefault.jpg">
<a href="#" onclick="zPlayYTVideo(event)"></a>
</figure>
if(zQ('.notouch')){
for(i=0;i<zQA('.videoContainer').length;i++){
var videoContainer=zQA('.videoContainer')[i];
var YouTubePlaceholderImage=document.createElement('img');
var url;
if(videoContainer.getAttribute('data-placeholderimage')){
url=videoContainer.getAttribute('data-placeholderimage');
}else{
url="http://img.youtube.com/vi/"+videoContainer.getAttribute('data-ytid')+"/maxresdefault.jpg";
}
YouTubePlaceholderImage.src=url;
videoContainer.appendChild(YouTubePlaceholderImage);
}
if(zQA('.videoContainer').length){
var tag=document.createElement('script');
tag.src="https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
}
var videoContainer;
function zPlayYTVideo(event){
event.preventDefault ? event.preventDefault():event.returnValue=false;
videoContainer=event.target.parentNode;
if(zQA('#YouTubeVideo').length){
for(i=0;i<zQA('.videoContainer.videoAdded').length;i++){
zQA('.videoContainer.videoAdded')[i].removeChild(zQ('.videoContainer.videoAdded #YouTubeVideo'));
zQA('.videoContainer.videoAdded')[i].removeAttribute('data-state');
zRemoveClass(zQA('.videoContainer')[i],'videoAdded');
}
}
videoContainer.setAttribute('data-state','playing');
zAddClass(videoContainer,'videoAdded');
var YouTubeVideo=document.createElement('div');
YouTubeVideo.id="YouTubeVideo";
videoContainer.appendChild(YouTubeVideo);
videoId=videoContainer.getAttribute('data-ytid');
player=new YT.Player('YouTubeVideo',{
width:980,
height:551,
videoId:videoId,
playerVars:{'showinfo':0,'modestbranding':1,'rel':0,'loop':0,'wmode':'opaque','controls':2,'playsinline':1},
events:{
'onReady':onPlayerReady,
'onStateChange':onPlayerStateChange
}
});
}
function onPlayerReady(){
if(zQ('.notouch')){
player.playVideo();
}
}
function onPlayerStateChange(event){
if(event.data == YT.PlayerState.PLAYING)
videoContainer.setAttribute('data-state','playing');
if(event.data == YT.PlayerState.PAUSED)
videoContainer.setAttribute('data-state','paused');
if(event.data == YT.PlayerState.ENDED)
videoContainer.setAttribute('data-state','ended');
}
}
else{
for(i=0;i<zQA('.videoContainer').length;i++){
var videoContainer=zQA('.videoContainer')[i];
var YouTubeIframe=document.createElement('iframe');
var youtubeid=videoContainer.getAttribute('data-ytid');
YouTubeIframe.src='https://www.youtube.com/embed/'+youtubeid+'?showinfo=0&modestbranding=1&rel=0&loop=0&wmode=opaque&controls=2&playsinline=1&border=0&autoplay=1';
videoContainer.appendChild(YouTubeIframe);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment