在单击弹出 youtube 视频的播放按钮之前以及在关闭视频之后开始播放视频的音频答案

【问题标题】：An audio of the video starts playing before clicking the play button that pops up youtube video, and also after closing the video在单击弹出 youtube 视频的播放按钮之前以及在关闭视频之后开始播放视频的音频
【发布时间】：2018-12-15 17:46:35
【问题描述】：

我需要代码方面的帮助。我的代码有一个播放按钮，当您单击该按钮时，它会弹出一个 youtube 视频并自动开始播放。我遇到的问题是，当我用播放按钮登陆页面时，视频的音频就开始播放了。即使在单击播放按钮并关闭视频后，音频仍会继续播放。我不想要视频打开之前或视频关闭之后的声音。有人可以帮我写代码吗？我做错了什么？我正在为我的网站在 Squarespace 代码块上编写此代码。我从 fiddle 获得了这段代码，并自定义了播放按钮。

小提琴的链接： https://jsfiddle.net/solodev/d1thm4cq/?utm_source=website&utm_medium=embed&utm_campaign=d1thm4cq

我的代码如下：

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3`enter code here`.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
</head>

<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
   <a href="#headerPopup" id="headerVideoLink" target="_blank">
  <span style="font-size: 32px; color: #36B3B3;">
<i class="fas fa-play"></i>
</span>
</a>
<div id="headerPopup" class="mfp-hide embed-responsive embed-responsive-21by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Sb1ZKzll6c4?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>

<style>
@charset "utf-8";
/* CSS Document */
#headerPopup{
width:75%;
margin:0 auto;
}

#headerPopup iframe{
width:100%;
margin:0 auto;
}
</style>

</body>

<script>
$( document ).ready(function() {
$('#headerVideoLink').magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always  set it to true if you don't provide alternative source in href.
});
});
</script>

【问题讨论】：

标签： javascript html css modal-dialog

【解决方案1】：

<iframe> 播放是因为链接包含&autoplay=1，无论模式是否打开。

您需要从链接中删除自动播放，在打开模态时动态添加并在关闭模态时再次删除：

$(document).ready(function() {
  $('#headerVideoLink').magnificPopup({
    type: 'inline',
    midClick: true,
    callbacks: {
      open: function() {
        const video = document.querySelector('#headerPopup iframe');
        video.src = video.src + (video.src.indexOf('?') < 0 ? '?' : '&') + 'autoplay=1';
      },
      close: function() {
        const video = document.querySelector('#headerPopup iframe');
        video.src = video.src.replace('&autoplay=1', '').replace('?autoplay=1', '');
      }
    }
  });
});

请记住，您还需要从 <iframe>s 链接中删除 &autoplay=1。
这是updated fiddle。

【讨论】：

非常感谢...现在可以使用了！！谢谢，非常感谢