无法删除youtube中的相关视频

我嵌入了一个带有放大弹出脚本的视频。 我无法在YouTube embedded的复制结束时删除相关视频

以下是我尝试过的代码：

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

---

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

这里有一种方法，可以通过添加额外的javascript来实现，如图所示

jQuery（window）.load（函数（）{
jQuery（'a[href*=“youtube.com/watch”]'）。放大弹出窗口({
键入：“iframe”，
iframe：{
模式：{
youtube：{
索引：“youtube.com”，
id:'v='，
src:“//www.youtube.com/embed/%id%？rel=0&autoplay=1”
}
}
}   
});      
});

---

如果不需要，您可以删除“&autoplay=1”。

如果您使用的是混合库（例如，混合图像和视频之一），则可能需要覆盖放大弹出窗口构建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=之后的所有内容，它只接受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类告诉放大镜使用iframe功能

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

有一个问题。我做了这个变通

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

$（'.js home video.js popup youtube'）。放大弹出({
//这里是您的默认配置
//除youtube src中的rel属性外，以下所有设置都是默认设置
//此选项用于在视频结束后删除显示的相关视频
//从html模板中的url添加rel=0停止了自动播放，因此出现了这种攻击
iframe：{
标记：“”+
''+
''+
“”，//弹出窗口的HTML标记，`mfp close`将替换为close按钮
模式：{
youtube：{
索引：“youtube.com/”，//检测视频类型的字符串（在本例中为youtube）。只需通过url.indexOf（索引）即可。
id:'v='，//将URL分成两部分的字符串，第二部分应为%id%
//或null-将返回完整的URL
//或应返回%id%的函数，例如：
//id:function（url）{return'parsed id'；}
src:'//www.youtube.com/embed/%id%？autoplay=1&rel=0'//URL，该URL将设置为iframe的源。
}
}
}
}

1）进入jquery.magnific-popup.min.js或jquery.magnific-popup.js，无论您在网站上嵌入什么内容。

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

3） 点击“保存”

瞧

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

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