CODEWITHSUNDEEP
javascriptjquerymagnific-popup
rickibarnes
rickibarnes

Reputation: 327

Magnific Popup - won't play video

I'm trying to use the Magnific popup to display a YouTube video. I have an issue that when you click on the link, nothing at all happens. There's no error message and it doesn't revert to back up behaviour (following link to YouTube).

Just using the code from the demo page, with the references updated to suit my own file structure:

<head>
  <link rel="stylesheet" href="/css/magnific-popup.css"> 

  <script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>
  <script src="/js/magnific.min.js"></script> 

</head>

<body>

  <div class="example gc3">
    <h3>Popup with video or map</h3>
    <p>In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered.</p>
    <div class="html-code">
      <a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a><br/>
  </div>

  <style type="text/css">
 /*** Simple fade transition*/
 .mfp-fade.mfp-bg {
 opacity: 0;
 -webkit-transition: all 0.15s ease-out; 
 -moz-transition: all 0.15s ease-out; 
 transition: all 0.15s ease-out;
 }
 .mfp-fade.mfp-bg.mfp-ready {
 opacity: 0.8;
 }
 .mfp-fade.mfp-bg.mfp-removing {
 opacity: 0;
 }
 .mfp-fade.mfp-wrap .mfp-content {
 opacity: 0;
 -webkit-transition: all 0.15s ease-out; 
 -moz-transition: all 0.15s ease-out; 
 transition: all 0.15s ease-out;
 }
 .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
 opacity: 1;
 }
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
 </style>
 <script type="text/javascript">
 $(document).ready(function() {
   $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
  });
 });
 </script>
 </div>
 </body>
 </html>

I'm running it off a server and can't get a result in any of my browsers - Chrome, IE9, Safari, Fiefox.

I looked at the documentation at http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe_type, but I don't actually understand it, so I don't know if that can help me.

Any hints as to what might be going on here?

Upvotes: 0

Views: 4879

Answers (2)

Jurgis
Jurgis

Reputation: 11

I also had the same problem and then I realized I had downloaded a custom built script, which did not include iframe support. Later I downloaded the full version and everything worked as expected.

Upvotes: 1

Richard Peck
Richard Peck

Reputation: 76784

http://jsfiddle.net/EF8EF/

 $(document).ready(function() {
   $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
   disableOn: 700,
   type: 'iframe',
   mainClass: 'mfp-fade',
   removalDelay: 160,
   preloader: false,
   fixedContentPos: false
  });
 });

I got it working with your code & including the file directly into the body of the Javascript. It might be the case that you're not calling the magnific-popup code correctly?

Upvotes: 0

Related Questions