CODEWITHSUNDEEP
jquerymagnific-popup
Aaron
Aaron

Reputation: 10450

Magnific Popup TypeError: embedSrc is undefined

I've searched and searched without fixing my issue. I am receiving the type error embedSrc is undefined.

  1. I've updated jQuery to the latest version
  2. Checked that the correct src https is being used
  3. Also running on a server

Still seeing a blank page modal and the iframe isn't loading?

I've tested the script using the type: inline; and am able to get the modals opening, it seems this is purely a iframe issue?

	/*
	 * INCLUDE THE MARKUP FOR VIDEO POPUP
	 */
	$('.video').magnificPopup({
	  type: 'iframe',
	  iframe: {
	    markup: '<div class="mfp-iframe-scaler">' +
	      '<div class="mfp-close"></div>' +
	      '<iframe class="mfp-iframe" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>' +
	      '</div>'
	  }
	});
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li a {
  width: 23%;
  margin: 1%;
  height: 180px;
  float: left;
  background: grey;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="uk2 video clearfix">
  <li>
    <a href="https://www.youtube.com/watch?v=AHoekYrbde8" class="video" data-title="Build Your Business With UK2">
	<img src="<?php echo HOST ?>/includes/images/videos/uk2/build-your-business.jpg">
</a>
  </li>
  <li>
    <a href="https://www.youtube.com/watch?v=cyIqG-TiNNA" class="video" data-title="How To Land A .London">
	<img src="<?php echo HOST ?>/includes/images/videos/uk2/how-to-land-london.jpg">
	</a>
  </li>
  <li>
    <a href="https://www.youtube.com/watch?v=iDZeTAu0z0k" class="video" data-title="What To Do With Your Domain">
	<img src="<?php echo HOST ?>/includes/images/videos/uk2/what-to-do-with-your-domain.jpg">
</a>
  </li>
  <li>
    <a href="https://www.youtube.com/watch?v=4_zsykAVvGU" class="video" data-title=".UK From UK2">
	<img src="<?php echo HOST ?>/includes/images/videos/uk2/uk-from-uk2.jpg">
</a>
  </li>

Upvotes: 0

Views: 1092

Answers (1)

Aaron
Aaron

Reputation: 10450

Urgh... Kicking myself in the face as i type this... The class that i'm calling the iframe with is also being used on the wrapping ul.

so i'm actually calling nothing.

Changing the class on my anchor for the video fixed me issue/

/*
 * INCLUDE THE MARKUP FOR VIDEO POPUP
 */
$('.video-modal').magnificPopup({
  type: 'iframe',
  iframe: {
    markup: '<div class="mfp-iframe-scaler">' +
      '<div class="mfp-close"></div>' +
      '<iframe class="mfp-iframe" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>' +
      '</div>'
  }
});


<ul class="uk2 video-modal clearfix"> /* Video here broke it */
  <li>
    <a href="https://www.youtube.com/watch?v=AHoekYrbde8" class="video" data-title="Build Your Business With UK2">
    <img src="<?php echo HOST ?>/includes/images/videos/uk2/build-your-business.jpg">
</a>
  </li>

Upvotes: 1

Related Questions