Отзывчивое видео Youtube - Collapsing

Question

У меня было это нормально, но теперь видео рушится, когда вы нажимаете на него.

Трюк, который я пытаюсь достичь, - использовать миниатюру, чтобы сэкономить полосу пропускания при загрузке страницы. Нажмите на миниатюру и загрузите видео. Опять же, это работало, но затем я попытался вертикально выровнять часть текста, и он начал рушиться при игре.

Любые идеи?

Соответствующий CSS:

.video { 
position: relative; 
background: #fafafa; 
margin-bottom: 0px; 
padding-top: 20px; 
z-index: 3; 
} 

.youtubeContainer { 

display: block; 
margin: 20px auto; 
width: 100%; 
max-width: 600px; 
} 

.youtube { 
background-position: center; 
background-repeat: no-repeat; 
display: block; 
padding-bottom: 56.25%; 
overflow: hidden; 
position: relative; 
width: 100%; 
height: 100%; 
cursor: hand; 
cursor: pointer; 
transition: all 200ms ease-out; 
} 



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

Answer 1

Я на самом деле написал небольшой скрипт для нашего сайта:

HTML:

<h2> 
         Videos 
        </h2> 
        <a href="" class="various fancybox.iframe" id="video1link"><div class="col-lg-4" id="video1"></div></a> 
        <a href="" class="various fancybox.iframe" id="video2link"><div class="col-lg-4" id="video2"></div></a> 

JavaScript для построить на лету:

$(document).ready(function() { 
     videoDisplayer('VIDEOID', '#video1', '#video1link'); 
     videoDisplayer('VIDEOID', '#video2', '#video2link'); 
    }); 

И функция видеодисплея:

function videoDisplayer(id, container, videolink) { 
     $.getJSON("https://www.googleapis.com/youtube/v3/videos", { 
      key: "YOUR KEY GOES HERE", 
      part: "snippet,statistics", 
      id: id, 
     }, function (data) { 
      $("<img>", { 
       src: data.items[0].snippet.thumbnails.medium.url, 
      }).appendTo(container); 
      $("<p></p>").text(data.items[0].snippet.title).appendTo(container); 
      var baseURL = 'https://youtube.com/v/'; 
      var videoURL = baseURL + id; 
      $(videolink).prop('href', videoURL); 
     }) 
    };