TypeError: $(...).magnificPopup is not a function
<p>I'm on chrome developer edition. The library is not loaded and I can't figure out why. The error is reported in the chrome console. This is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;&lt;li&gt;&lt;a class="mediaimage-link" href="~/img/HP/mediakit/The-CorPath-Vascular-Robotic-System_HR.jpg"&gt;&lt;img src="~/img/HP/The-CorPath-Vascular Robotic-System-187.jpg" alt=""&gt;
&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.youtube.com/watch?v=TnQsToiKKgw?rel=0&amp;amp;showinfo=0" class="popup-youtube"&gt; &lt;img src="~/img/HP/Iyer-Video-187.jpg" alt=""&gt;&lt;/a&gt;
         &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  //Media Image Popup
  $('.mediaimage-link').magnificPopup({type:'image'});
  //Video Iframe Popup
    $('.popup-youtube').magnificPopup({
          disableOn: 700,
          type: 'iframe',
          mainClass: 'mfp-fade',
          removalDelay: 160,
          preloader: false,
          fixedContentPos: false
        });
});`</code></pre>
</div>
</div>
</p>