如何“懒加载”嵌入多个带有视频标题的YouTube视频

Question

我想实现“懒惰加载”与YouTube视频标题嵌入多个youtube视频我只想加载视频图像缩略图与youtube视频标题在一开始，当用户点击它，然后只加载视频。我有一个代码这一点，但在此代码中，只有youtube视频图像是显示在第一次加载不显示在image.How上显示的视频标题的youtube视频image.Below是我的代码。

<script type="text/javascript">
jQuery(document).ready(function($) {
 ( 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&autoplay=1" );

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

} )();
});
</script>

Answer 1

您只能使用API-Key通过YouTube API从视频和其他数据中获取名称。有了这个键，你可以通过javascript、php或你首选的语言来解析Youtube-API请求，例如名称。

.title列出了视频的名称。

这是Github上的一个项目，用于Youtube，谷歌地图和Vimeo视频：https://github.com/viktorbergehall/lazyframe