在内容的窗口中播放 Youtube iframe答案

【问题标题】：Play Youtube iframe in a window over the content在内容的窗口中播放 Youtube iframe
【发布时间】：2020-06-03 19:32:44
【问题描述】：

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

谁能给我一个建议？

谢谢！

【问题讨论】：

模态？ getbootstrap.com/docs/4.5/components/modal
我认为这对你有用YouTube and Vimeo Gallery
感谢您的回答！这是正确的方向。但不幸的是我不能使用它们。我有一个 iFrame（Vimeo 或 Youtube）作为页面上运行的小视频，并希望通过单击将其显示在内容上。你知道有什么解决方案吗？
在这个页面上alteravm.cargo.site 我希望视频在点击时打开内容。

标签： javascript iframe youtube

【解决方案1】：

当有人点击缩略图时，您可以使用 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>

【讨论】：

【解决方案2】：

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

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

Documentation

<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>

【讨论】：

感谢您的回答！这是正确的方向。但不幸的是我不能使用它们。我有一个 iFrame（Vimeo 或 Youtube）作为页面上运行的小视频，并希望通过单击将其显示在内容上。