Evet tam bu şekilde. Yanlış olduğunu düşünerek sektörümde bazı büyük firmaları inceledim, onlar da bu şekilde eklemiş.
iframe boyutunu değiştirerek falan da ekledim, küçültmek de pek etki etmedi hız konusunda.
İframe olarak değil video resmini koyarak, resime tıkladıgında iframe çağırması yapabilirsiniz.
Bootstrap tam uyumlu çalışır. Özel olarak kendinizde javascript kütüphanenize ekliyebilirsiniz.
<div class="youtube-video-place embed-responsive embed-responsive-4by3 " data-yt-url="https://www.youtube.com/embed/BjngNWP9C5s?rel=0&showinfo=0&autoplay=1">
<img src="Thumbnail adresi buraya gelecek" async class="play-youtube-video">
</div>
var video_wrapper = $('.youtube-video-place');
// Check to see if youtube wrapper exists
if(video_wrapper.length){
// If user clicks on the video wrapper load the video.
$('.play-youtube-video').on('click', function(){
/* Dynamically inject the iframe on demand of the user.
Pull the youtube url from the data attribute on the wrapper element. */
video_wrapper.html('<iframe allowfullscreen frameborder="0" class="embed-responsive-item" src="' + video_wrapper.data('yt-url') + '"></iframe>');
});
}
Kaynak:
https://medium.com/@ryanlebel/speed-...me-c6b9148d0a2