Question

我已经使用magnificpopup脚本嵌入了一个视频。我无法在youtbe嵌入式播放结束时删除相关视频。

以下是我尝试的代码：

<a class="popup-youtube" href="https://www.youtube.com/watch?rel=0&feature=player_detailpage&v=83UHRghhars">

但不起作用。以下代码也不重现视频

<a class="popup-youtube" href="https://www.youtube.com/watch?feature=player_detailpage&v=83UHRghhars&rel=0">

如果我把youtube告诉我的嵌入代码：

//www.youtube.com/embed/83UHRghhars?rel=0

视频不起作用。我做错了什么？

Answer 1

以下是一种方法，可以通过添加其他javascript来展示here。

<script>
jQuery(window).load(function(){
    jQuery('a[href*="youtube.com/watch"]').magnificPopup({
       type: 'iframe',
           iframe: {
               patterns: {
                   youtube: {
                       index: 'youtube.com', 
                       id: 'v=', 
                       src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1'
                    }
               }
           }   
     });      
});
</script>

您可以删除＆＃39;＆amp; autoplay = 1＆＃39;如果你不需要它。

Answer 2

如果您使用的是混合图库（例如混合的图像和视频之一），那么您可能想要覆盖如何使用popup构建嵌入的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&amp;rel=0&amp;feature=player_detailpage'
            }
        }
    }

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

如果你这样做，那么将你的参数从html标记中的url中删除，或者在末尾设置v =属性，这样在构建embed url时就不会添加额外的参数。

最后的样子可能是这样的：

$('.gallery-list').magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
        enabled: true
    },
    iframe: {
        patterns: {
            youtube: {
                src: '//www.youtube.com/embed/%id%?autoplay=1&amp;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构建嵌入代码，然后添加额外的autoplay和rel url参数。

Answer 3

存在问题here。我做了这个解决方法。

$('.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 4

1）转到 jquery.magnific-popup.min.js 或 jquery.magnific-popup.js ，无论你在网站上嵌入什么。

2）使用文本编辑器搜索和替换，如下所示：
搜索：youtube.com/embed/%id%?autoplay=1
替换：youtube.com/embed/%id%?rel=0&autoplay=1

3）点击“保存”。

瞧

无法删除youtube中的相关视频

4 个答案: