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

Question

我想用你的视频标题实现“延迟加载”嵌入多个 YouTube 视频。我只想在开始时加载带有 youtube 视频标题的视频图像缩略图，当用户点击它时只加载视频。我有一个为此的代码，但在此代码中，仅在第一次加载时显示 youtube 视频图像，未在图像上显示视频标题。如何在 youtube 视频图像上显示标题。以下是我的代码。

<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 密钥的 YouTube API 从视频和其他数据中获取名称。 使用此密钥，您可以解析 Youtube-API 例如名称，通过 javascript、php 或您首选的语言来解析 json 请求。
.title 是视频的名称。

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