Wistia 내장 비디오로 인해 페이지로드가 너무 느립니다.

Question

처음으로 페이지를로드 할 때마다 내 웹 사이트에 iframe에 포함 된 Wistia 비디오가 많이 있습니다. 시간이 많이 걸리므로 내 웹 사이트가 느려집니다. 특정 비디오를 클릭 할 때마다 비디오를로드 할 수있는 방법은 있습니다.

이

<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 명령 동영상에서 많이 있습니다. 모든 조언과 제안을 부탁드립니다.

Answer 1

여기를 보시면 많은 동영상이 있습니다. 하지만, 내 코드를 복사하여 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>