📌  相关文章
📜  iframe youtube 播放列表不起作用 html (1)

📅  最后修改于: 2023-12-03 15:15:47.944000             🧑  作者: Mango

问题描述：iframe 嵌入的 YouTube 播放列表不起作用

假设你正在开发一个网站，需要在其中嵌入 YouTube 播放列表以供用户观看。为此，你使用了 iframe 技术将播放列表嵌入到网页中。但是，当用户在网页中点击播放列表中的某个视频时，视频却无法播放。这个问题该如何解决呢？

解决方案：

方案一：使用 YouTube Data API

可以使用 YouTube Data API 获得 YouTube 播放列表的信息，并通过 JavaScript 在网页中渲染出自己的播放列表。通过此方法，可以实现更高的自定义度和可控性。

以下是使用 YouTube Data API 通过 JavaScript 渲染 YouTube 播放列表的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My YouTube playlist</title>
    <script src="https://apis.google.com/js/client.js"></script>
  </head>
  <body>
    <div id="player"></div>
    <script>
      // Replace with the playlist ID you want to render.
      var playlistId = 'YOUR_PLAYLIST_ID';

      // Replace with the API key you want to use.
      var apiKey = 'YOUR_API_KEY';

      // Load the API client and make a request to the API.
      gapi.client.load('youtube', 'v3', function() {
        gapi.client.youtube.playlistItems.list({
          playlistId: playlistId,
          key: apiKey,
          part: 'snippet'
        }).execute(function(resp) {
          var items = resp.items;
          var videoIds = [];

          // Get the video IDs from the API response.
          for (var i = 0; i < items.length; i++) {
            var videoId = items[i].snippet.resourceId.videoId;
            videoIds.push(videoId);
          }

          // Render the YouTube player with the video IDs.
          var player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: videoIds.join(','),
            events: {
              'onReady': function() {
                player.playVideo();
              }
            }
          });
        });
      });
    </script>
  </body>
</html>
方案二：调整 iframe 嵌入代码

如果您仍然希望使用 iframe 技术嵌入 YouTube 播放列表，可以尝试调整 iframe 嵌入代码。具体来说，可以将 iframe 中的 src 属性值改为以下代码：

https://www.youtube.com/embed/?listType=playlist&list=YOUR_PLAYLIST_ID

其中，YOUR_PLAYLIST_ID 是要播放的播放列表 ID。通过这种方式重新设置 iframe 的 src 属性值，可以让播放列表和其中的视频在网页中正常播放。

方案三：使用 JavaScript 触发播放列表的点击事件

如果您希望保持使用 iframe 技术，并且已经确定了导致播放列表无法正常播放的原因是因为用户点击播放列表时，没有触发 iframe 中播放列表的点击事件，可以使用 JavaScript 触发点击事件来解决这个问题。

以下是使用 JavaScript 触发 iframe 中播放列表点击事件的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My YouTube playlist</title>
  </head>
  <body>
    <iframe id="player" src="https://www.youtube.com/embed/?listType=playlist&list=YOUR_PLAYLIST_ID" frameborder="0" allowfullscreen></iframe>

    <script>
      var iframe = document.getElementById('player');
      var innerDoc;

      // Wait for iframe to load
      iframe.onload = function() {
        // Get the iframe's inner document object
        innerDoc = iframe.contentDocument || iframe.contentWindow.document;

        // Find the playlist items by class name
        var playlistItems = innerDoc.getElementsByClassName('pl-video-title-link');

        // Add a click event listener to each item
        for (var i = 0; i < playlistItems.length; i++) {
          playlistItems[i].addEventListener('click', function(e) {
            // Prevent the default action
            e.preventDefault();

            // Get the href attribute from the anchor tag
            var href = this.href;

            // Find the list item by class name
            var listItem = this.parentNode;

            // Trigger a click event on the list item
            var clickEvent = new MouseEvent('click', {
              'view': window,
              'bubbles': true,
              'cancelable': true
            });
            listItem.dispatchEvent(clickEvent);

            // Update the iframe's src attribute to the video URL
            iframe.src = href;
          });
        }
      };
    </script>
  </body>
</html>

以上就是关于 iframe 嵌入的 YouTube 播放列表不起作用的几种解决方案。祝开发愉快！