为 youtube 视频添加宏伟的弹出窗口

Question

window 弹出窗口，但视频未播放。它说''The web page at file://www.youtube.com/embed/Nlw5FnHGER4?autoplay=1 might be temporarily down or it may have moved permanently to a new web address.''

<!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>

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

Answer 1

如果您想要 popup/another window 中的视频，试试这个

<!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 中的 link 在任何其他你可以点击它但堆栈溢出需要你右键单击并说“打开新标签页

<!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>

Answer 2

  $(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 并且有效。

为 youtube 视频添加宏伟的弹出窗口

adding magnific popup for youtube video

html

javascript

youtube

iframe

magnific-popup