javascript - 为什么 YouTube 视频无法加载

Question

我尝试在我的网站上加载 YouTube 视频，但当我单击播放按钮时，大约需要 23 秒的黑屏，才会弹出页面 它可能已被移动或删除。 消息。

我尝试了多个视频，由我自己或其他人上传，但出现同样的错误。

这是我为此编写的代码。

<!-- Video Section -->
<section id="video" class="video-section">
  <div class="tf-bg-overlay">

    <div class="container">

      <div class="video-intro">
         <a class="popup-video" href="https://youtu.be/8hTSK1iDcvQ"> <i class="fa fa-play"></i>  </a>
         <h2>Video Introducing</h2><p>(coming soon)</p>
      </div>

    </div>

    <!--/.container-->
  </div>
  <!--/.overlay-->
</section>
<!-- /.Video Section -->

这是视频部分的 CSS

.video-introducing{
    background: url(../images/video-bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
    min-height: 390px;
    border: 5px solid #FFF;
    padding: 5px;
    box-shadow: 0 0px 0px 1px #eee;
}

用于弹出窗口的 JavaScript。 $(函数() { var 视频 = $(".video");

        videos.on("click", function(){
            var elm = $(this),
                conts   = elm.contents(),
                le      = conts.length,
                ifr     = null;

            for(var i = 0; i<le; i++){
              if(conts[i].nodeType == 8) ifr = conts[i].textContent;
            }

            elm.addClass("player").html(ifr);
            elm.off("click");
        });
});

编辑:我对初始代码进行了一些更改，并添加了 javascript 代码来为视频制作弹出窗口。

Answer 1

看看 w3schools 网站 https://www.w3schools.com/html/html_youtube.asp您想要的是一个 iframe，这样您就可以查看您网站上另一个网页的内容，并且您需要在网址中添加嵌入

这是他们在网站上提供的示例:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>