javascripthtmliframeyoutubemagnific-popup

adding magnific popup for youtube video


the window popup but video isn't playing. it says ''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>

when i am trying this with a image then it is working fine.


Solution

  •   $(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
        });
      });
    

    Declared src for iframe and it worked.