无法删除youtube中的相关视频

Answer 1

Answer 2

这里有一个问题。我做了这个解决方法。

$('.js-home-video .js-popup-youtube').magnificPopup({
    // your default config here
    
    // All below settings are default except the rel attribute in youtube-src
    // This is here to remove the related videos from showing up after the video ends
    // Adding rel=0 from url in html template stopped autoplay, hence this hack
    iframe: {
      markup: '<div class="mfp-iframe-scaler">'+
        '<div class="mfp-close"></div>'+
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
        '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button
    
      patterns: {
        youtube: {
          index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).
    
          id: 'v=', // String that splits URL in a two parts, second part should be %id%
          // Or null - full URL will be returned
          // Or a function that should return %id%, for example:
          // id: function(url) { return 'parsed id'; }
    
          src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0' // URL that will be set as a source for iframe.
        }
      }
    }
}

Answer 3

如果您使用的是混合图库（例如混合的图像和视频之一），那么您可能想要覆盖放大弹出窗口构建 YouTube 嵌入的方式。

youtube 的默认设置是

youtube: {
  index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

  id: 'v=', // String that splits URL in a two parts, second part should be %id%
  // Or null - full URL will be returned
  // Or a function that should return %id%, for example:
  // id: function(url) { return 'parsed id'; }

  src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe.
}

这意味着 ID 是 v= 之后的所有内容，它只是在创建嵌入代码时将其保留并在末尾粘贴 autoplay=1 。

要更改此设置，您可以传入要使用的任何特殊 iframe youtube 模式：

    iframe: {
        patterns: {
            youtube: {
                src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0&feature=player_detailpage'
            }
        }
    }

在这里，我们调整了源代码，以便它将正常使用 id 构建嵌入，然后粘贴您的 rel 和特征参数（以及自动播放）

如果这样做，则将参数保留在 html 标记中的 url 中，或者在末尾设置 v= 属性，以便在构建嵌入 url 时不会添加额外的参数。

最终的外观可能是这样的：

$('.gallery-list').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
        enabled: true
    },
    iframe: {
        patterns: {
            youtube: {
                src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0'
            }
        }
    }
});

你的元素可能是：

<div class="gallery-list">
<a class="popup-youtube mfp-iframe" href="https://www.youtube.com/watch?v=83UHRghhars">Click here</a>
<img class="mfp-image" href="http://domain/image.jpg" width="100" height="200" />
</div>

视频链接上的 mfp-iframe 类告诉 magnific 使用 iframe 功能。

上面的初始化代码告诉 magnific 默认使用图像，但 mfp-iframe css 类将覆盖视频的该类。 现在，当有人点击视频时，放大的弹出窗口应该通过 v= 参数获取视频 id，然后使用该 id 构建嵌入代码，然后附加额外的自动播放和 rel url 参数。

Answer 4

1. 转到

   jquery.magnific-popup.min.js

    或 

   jquery.magnific-popup.js

   ，无论您在网站上嵌入什么内容。

2. 使用文本编辑器

   搜索和替换，如下所示：

    Search: youtube.com/embed/%id%?autoplay=1<br>
    Replace: youtube.com/embed/%id%?rel=0&autoplay=1

3. 点击“保存”。

瞧