在内容上 window 播放 Youtube iframe

Question

我的页面上有几个小视频。如果有人点击视频，它应该以更大的尺寸在页面中央播放视频。我不知道要搜索什么或如何搜索！

有人可以给我建议吗？

谢谢！

Answer 1

我会使用 modal。 Bootstrap 非常容易实施（如果您以前从未使用过它）。

这里是一个如何使用它的例子（只需添加你自己的 CSS 样式），这里是文档：

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
    Youtube video
  </button>
  <!-- Modal -->
  <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-center">
          <iframe style="height: 100%; width: auto;" src="https://www.youtube.com/embed/UgHKb_7884o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

Answer 2

您可以使用 Youtube API 在有人点击缩略图时动态加载视频

<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
    }

    img {
      width: 250px;
      height: 250px;

    }
  </style>
</head>
  <body>
    <div class="container"><span>Thumbnail (click me)</span>
      <div id="thumbs">
      <img class="videoThumb" src="http://i3.ytimg.com/vi/WL96WqA6e9Y/maxresdefault.jpg" data-video="WL96WqA6e9Y">
      <img class="videoThumb" src="http://i3.ytimg.com/vi/ZQy89tZ-mRU/hqdefault.jpg" data-video="ZQy89tZ-mRU">
      </div>
    </div>
    <div class="container">
      <span>Video</span>
      <div id="videoContainer"></div>
    </div>
    <script>
      // Load the Youtube IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function enlarge(event) {
        //Get the video ID from the thumbnail
        var videoID = event.target.attributes["data-video"].value;
        //Get the video container
        var container = document.getElementById("videoContainer");
        //Clear it as youtube overwrites the element
        container.innerHTML = "";
        //Create element which will be replaced with video
        var videoFrame = document.createElement('div');
        //append to the container
        container.appendChild(videoFrame);
        //create youtube video
        videoFrame.id = 'videoFrame';
            new YT.Player('videoFrame', {
                height: '360',
                width: '640',
                videoId: videoID
        });
    }
    //Get all thumbnails
    var vids = document.getElementsByClassName("videoThumb");
    //Add event listener to all thumbnails
    for(var i = 0; i < vids.length; i++) {
        vids[i].addEventListener("click",enlarge);
    }
    </script>
</html>

在内容上 window 播放 Youtube iframe

Play Youtube iframe in a window over the content

javascript

youtube

iframe