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

anotherway.html

<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>

anotherway.js

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();
    })
  }
}

html.html

<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>

js.js

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);
  }
}