Responsive Youtube Video - Collapsing

Question

Ich hatte das funktioniert gut, aber jetzt das Video zusammenbricht, wenn Sie darauf klicken.

Der Trick, den ich versuche zu erreichen, ist ein Miniaturbild zu verwenden, um beim Laden der Seite Bandbreite zu sparen. Klicken Sie auf das Vorschaubild und das Video wird geladen. Noch einmal, das funktionierte, aber dann habe ich versucht, etwas vom Text vertikal auszurichten und es begann beim Spielen zu kollabieren.

Irgendwelche Ideen?

Relevante 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

Ich schrieb tatsächlich ein kleines Skript für unsere Website:

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 für on the fly Build:

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

Und die videoDisplayer Funktion:

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