为 youtube 视频添加华丽的弹出窗口答案

【问题标题】：adding magnific popup for youtube video为 youtube 视频添加华丽的弹出窗口
【发布时间】：2021-02-05 17:09:47
【问题描述】：

窗口弹出，但视频未播放。它说''位于 file://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1 的网页可能暂时关闭，或者它可能已永久移动到新的网址。''

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>popup</title>
    <link rel="stylesheet" href="magnific-popup.css">
  </head>
  <body>
    <a class= "popup" href= "https://www.youtube.com/watch?v=Nlw5FnHGER4">play</a>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.magnific-popup.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.popup').magnificPopup({
          type:"iframe",
        })
      })
    </script>
  </body>
</html>

当我尝试使用图像时，它工作正常。

【问题讨论】：

file://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1 - 这是正确的吗？ - 注意 file://.

标签： javascript html iframe youtube magnific-popup

【解决方案1】：

  $(document).ready(function(){
    $('.popup-youtube, .popup-vimeo').magnificPopup({
      // disableOn: 700,
      type: 'iframe',
      mainClass: 'mfp-fade',
      removalDelay: 160,
      preloader: false,
      iframe:{
        patterns:{
          youtube:{
          index: 'youtube.com',
          id: 'v=',
          src: 'https://www.youtube.com/embed/%id%'
        },
      },
      srcAction:'iframe_src',
    },
      fixedContentPos: false
    });
  });

为 iframe 声明了 src 并且它起作用了。

【讨论】：

【解决方案2】：

如果你想在弹出窗口/另一个窗口中播放视频，试试这个

<!DOCTYPE html>
 <html lang="en" dir="ltr">
  <head>
   <base target="_top">
    <meta charset="utf-8">
    <title>popup</title>
     <link rel="stylesheet" href="magnific-popup.css">
      <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script src="jquery.magnific-popup.min.js"></script>
  </head>
  <body>
    <a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
  </body>
 </html>

请注意所有脚本标签向头部下方的移动、更新的 URL 以及删除

 <script type="text/javascript">
    $(document).ready(function(){
        $('.popup').magnificPopup({
          type:"iframe",
        })
      })
   </script>

如果您希望将其嵌入页面（作为 iframe），请尝试：

<!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
    <base target="_top">
      <meta charset="utf-8">
      <title>popup</title>
      <link rel="stylesheet" href="magnific-popup.css">
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.magnific-popup.min.js"></script>
        <script type="text/javascript">
          $(document).ready(function(){
            $('.popup').magnificPopup({
              type:"iframe",
            })
          })
       </script>
    </head>
    <body>
      <iframe width="420" height="315" class= "popup" scr= "https://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1">play</iframe>
    </body>
</html>

也可以参考这个网站，w3 学校，(here)

也可以在这里试试（选项 1），右键单击 STACK OVERFLOWS ENGINE 中的链接，您可以单击它，但堆栈溢出要求您右键单击并说“在新选项卡中打开”

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
  <base target="_top">
    <meta charset="utf-8">
    <title>popup</title>
    <link rel="stylesheet" href="magnific-popup.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.magnific-popup.min.js"></script>
    <script type="text/javascript"></script>
  </head>
  <body>
    <a class= "popup" href= "https://www.youtube.com/embed/Nlw5FnHGER4">play</a>
  </body>
</html>

【讨论】：

您是否在堆栈溢出中右键单击并选择在新选项卡中打开？（或在 js.fiddle 中使用它来点击）