3

我的网站有很多 Wistia 视频，嵌入在 iframe 中，每当我第一次加载我的页面时，这需要很长时间，这使我的网站变慢，有什么方法可以在我点击它时加载视频特定的视频。

这是小代码片段

<ul> 
 <li>
    <a href="#" class="toggle">Operations</a>
    <ul class="inner ulmargin">
    <iframe src=" https://fast.wistia.net/embed/iframe/b8?seo=false" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" id="wistia_4d8229898d"  name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="280" height="200"></iframe>
   </ul>
 </li>
<ul>

以上只是一个视频的示例，我在该UL命令中有很多视频。任何意见和建议将不胜感激。

4

1 回答 1

2

看看这里，这里有很多视频。但它加载速度很快，复制我的代码并粘贴到一个 html 文件中并运行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
html {
    background-color: #f3f3f3;
}
.wrapper {
    max-width: 680px;
    margin: 60px auto;
    padding: 0 20px;
}

.youtube {
    background-color: #000;
    margin-bottom: 30px;
    position: relative;
    padding-top: 56.25%;
    overflow: hidden;
    cursor: pointer;
}
.youtube img {
    width: 100%;
    top: -16.82%;
    left: 0;
    opacity: 0.7;
}
.youtube .play-button {
    width: 90px;
    height: 60px;
    background-color: #333;
    box-shadow: 0 0 30px rgba( 0,0,0,0.6 );
    z-index: 1;
    opacity: 0.8;
    border-radius: 6px;
}
.youtube .play-button:before {
    content: "";
    border-style: solid;
    border-width: 15px 0 15px 26.0px;
    border-color: transparent transparent transparent #fff;
}
.youtube img,
.youtube .play-button {
    cursor: pointer;
}
.youtube img,
.youtube iframe,
.youtube .play-button,
.youtube .play-button:before {
    position: absolute;
}
.youtube .play-button,
.youtube .play-button:before {
    top: 50%;
    left: 50%;
    transform: translate3d( -50%, -50%, 0 );
}
.youtube iframe {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}
</style>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/><div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<div class="wrapper">
    <div class="youtube" data-embed="AqcjdkPMPJA">
        <div class="play-button"></div>
    </div>
</div><br/>
<script>
( function() {

var youtube = document.querySelectorAll( ".youtube" );

for (var i = 0; i < youtube.length; i++) {

var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";

var image = new Image();
image.src = source;
image.addEventListener( "load", function() {
youtube[ i ].appendChild( image );
}( i ) );

youtube[i].addEventListener( "click", function() {

var iframe = document.createElement( "iframe" );

        iframe.setAttribute( "frameborder", "0" );
        iframe.setAttribute( "allowfullscreen", "" );
        iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );

        this.innerHTML = "";
        this.appendChild( iframe );
} );    
};

} )();
</script>

于 2017-12-08T13:28:03.730 回答