Question

我试图以更快的加载时间嵌入YouTube视频，同时 - 响应图像。问题是使图像缩略图和iframe（一旦点击）都响应。

我可以制作响应式嵌入，我可以单独使用Javascript加快嵌入速度。

在Javascript中，我用缩略图替换了视频iframe。单击缩略图后，它会加载视频ID。但是，这个iframe会导致宽度和高度变小。

有谁知道如何正确组合这两种方法？

这是HTML：

<div class="embed-container"><div class="youtube" id="WwLq0G7OGfI"></div>`</div>`

这是CSS：

body {
text-align: center;
background-color: #1D1F20;
color: white;
}

a, a:visited {
  color: white;  
}

.embed-container { 
            position: relative; 
            padding-bottom: 56.25%; 
            height: 0; overflow: 
            hidden; max-width: 90%; 
        } 
.embed-container > .youtube { 
            position: absolute; 
            width: 50%; 
            height: 50%; 
        }
.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
    margin: 40px auto 0 auto;
}

iframe {
  margin: 40px auto 0 auto;
}

.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);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    color: white!important;
}

.youtube .play:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.p {
  margin-top: 60px;
}

和JS：

"use strict";

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if(!document.getElementsByClassName) {
        // IE8 support
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
    var videos = getElementsByClassName(document.body,"youtube");
}
else {
    var videos = document.getElementsByClassName("youtube");
}

var nb_videos = videos.length;
for (var i=0; i<nb_videos; i++) {
    // Based on the YouTube ID, we can easily find the thumbnail image
    videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';

    // Overlay the Play icon to make it look like a video player
    var play = document.createElement("div");
    play.setAttribute("class","play");
    play.style.color = "white";
    videos[i].appendChild(play);

    videos[i].onclick = function() {
        // Create an iFrame with autoplay set to true
        var iframe = document.createElement("iframe");
        var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
        if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
        iframe.setAttribute("src",iframe_url);
        iframe.setAttribute("frameborder",'0');
        iframe.setAttribute("allowfullscreen", "true")
        // The height and width of the iFrame should be the same as parent
        iframe.style.width  = this.style.width;
        iframe.style.height = this.style.height;

        // Replace the YouTube thumbnail with YouTube Player
        this.parentNode.replaceChild(iframe, this);
    }
    }
});

无法使用Javascript嵌入更快，响应更快的YouTube视频

0 个答案: