宏弹出式YouTube视频未链接

编程问答 2022-06-06

问题描述

窗口弹出，但视频未播放。 它说：“位于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>

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

解决方法

  $(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，并且可以使用。

,

如果要在弹出窗口/另一个窗口中播放视频，请尝试

<!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），在其他任何堆栈溢出引擎中的链接上单击右键，您都可以单击它，但是堆栈溢出要求您右键单击并说“在新标签页中打开” 

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

htmliframeiframejavascriptmagnific-popupyoutubeyoutube