Popup Content

You can check example here

Including files

These are all the files you need to import in your page so the plugin can work.

      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/magnific-popup.css" />
      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/animate.min.css" />
      <link rel="stylesheet" type="text/css" href="../plugin/assets/css/imageTiles.css" media="all" />

       <!-- jQuery 1.8+ -->
       <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

       <script src="../plugin/assets/js/imagesloaded.pkgd.min.js"></script>
       <script src="../plugin/assets/js/anime.min.js"></script>
       <script src="../plugin/assets/js/classie.js"></script>
       <script src="../plugin/assets/js/modernizr-custom.js"></script>
       <script src='../plugin/assets/js/isotope.pkgd.min.js'></script>
       <script src="../plugin/assets/js/magnific-popup.min.js"></script>
       <script src="../plugin/assets/js/loadgo.min.js"></script>
       <script src="../plugin/assets/js/jquery.imageTiles.js"></script>

It’s not required, but I recommend placing the CSS files in <head> and the JavaScript files and initialization code in the footer of your site (before the closing </body> tag).

HTML Structure

        <div id="myGrd" class="tiles-grid">
            <div class="tiles-grid-item set1" data-size="1180x787" >
                 <a class="tiles-grid-link" href="https://www.youtube.com/watch?v=rj73lCWeZQw" data-type="iframe">
                      <figure class="effect-zoe">
                            <img class="tiles-grid-img" src="img/demo/10.jpg" alt="Some image" />

                            <figcaption class="hover">
                                <h2>Youtube content</h2>

Make sure that you put URL in tiles-grid-link element's href attribute, also you should add data-type="iframe".

Example :

        <a class="tiles-grid-link" href="https://www.youtube.com/watch?v=rj73lCWeZQw" data-type="iframe"> 


Once you got the HTML markup in your site you need to initialize the plugin in Javascript. You need to take the id from the container of the boxes in the HTML (In the example above would be: id="myGrd") and use it for the initialization.