javascript - 响应式 Youtube 视频 - 折叠

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

以及 videoDisplayer 函数:

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