是否只有在内容完全加载后才能加载 YouTube iframe？

Question

我正在为 YouTuber 开发一个网站，所以当然要将视频加载到页面上。我通过 AJAX 使用外部 PHP 脚本调用 API returns 视频的标题和 ID。然后将它们放在 HTML 中。我目前拥有的代码可能不是最有效的，但我开始时页面上只有 1 个视频，因此只添加到代码而不是重做它更容易。这是我的代码（我觉得没有必要包含 PHP。它只是 returns JSON 每个视频的信息）：

HTML:

<h3 id="video-title-1"></h3>

<!-- Video container -->
<div class="embed-responsive embed-responsive-16by9">
    <div id="video-div0">
        <iframe id="video-embed-1" class="embed-responsive-item" 
                width="710" height="399" src="" allowfullscreen></iframe>
     </div>
</div><!-- End video container -->

4 more of these, one for each video.

JS:

<script type="text/javascript">

    function getYTVideos() {

        var yTUrlPart = "http://www.youtube.com/embed/";

        $.ajax({
            type: 'POST',
            url: 'getYTVideos.php', 
            dataType: 'json', 
            success: function(data) {
                $("#video-title-1").html(data.video0.title);
                $("#video-embed-1").attr("src", yTUrlPart + data.video0.id);

                $("#video-title-2").html(data.video1.title);
                $("#video-embed-2").attr("src", yTUrlPart + data.video1.id);

                $("#video-title-3").html(data.video2.title);
                $("#video-embed-3").attr("src", yTUrlPart + data.video2.id);

                $("#video-title-4").html(data.video3.title);
                $("#video-embed-4").attr("src", yTUrlPart + data.video3.id);

                $("#video-title-5").html(data.video4.title);
                $("#video-embed-5").attr("src", yTUrlPart + data.video4.id);

                // Hides the loading icon/text
                $(".social-loading-youtube").hide();
                // Displays the videos, which start out as display: none.
                $("#carousel-videos").css("display", "block");
            }
        });
    };

现在，一切正常，但问题来了。当标题和 ID 插入 HTML 时，加载图标会隐藏，但显然实际视频仍然需要加载。所以在网速较慢的情况下，当加载图标消失时，标题会出现，但视频可能会持续几秒钟，留下一个大红色space。

这是我的意思的 gif 以使其更清楚：http://gfycat.com/DecentWigglyKillerwhale（Gifycat 喜欢给他们提供非常奇怪的链接。另外，对马铃薯的质量感到抱歉）。

基本上，我的问题是... 有没有办法在视频完全加载之前让加载图标保持在那里？

很抱歉 post。感谢您提供的任何答案，谢谢，

奥利.

Answer 1

你可能会做类似的事情

var loadedIframes = 0, onIframeLoad;
onIframeLoad = function() {
  loadedIframes++;
  if (jQuery("iframe").size() === loadedIframes) { //Once all iframes are loaded, you show/hide loader and iframes
    // Hides the loading icon/text
    $(".social-loading-youtube").hide();
    // Displays the videos, which start out as display: none.
    $("#carousel-videos").css("display", "block");
  }
}
jQuery('iframe').on("load", onIframeLoad);
function getYTVideos() {

    var yTUrlPart = "http://www.youtube.com/embed/";

    $.ajax({
        type: 'POST',
        url: 'getYTVideos.php', 
        dataType: 'json', 
        success: function(data) {
            $("#video-title-1").html(data.video0.title);
            $("#video-embed-1").attr("src", yTUrlPart + data.video0.id);

            $("#video-title-2").html(data.video1.title);
            $("#video-embed-2").attr("src", yTUrlPart + data.video1.id);

            $("#video-title-3").html(data.video2.title);
            $("#video-embed-3").attr("src", yTUrlPart + data.video2.id);

            $("#video-title-4").html(data.video3.title);
            $("#video-embed-4").attr("src", yTUrlPart + data.video3.id);

            $("#video-title-5").html(data.video4.title);
            $("#video-embed-5").attr("src", yTUrlPart + data.video4.id);
        }
    });
};
getYTVideos();

是否只有在内容完全加载后才能加载 YouTube iframe？

Is there a way to load a YouTube iframe only after the contents have fully loaded?

javascript

youtube

jquery