title: Popup Video doesn`t show over 3D image gallery
body: <p>folks!</p>
  
  <p>Me might be stupid, but i cant get working video popUp box.
  Okay, let's start from beginning. I have 3D style image carousel gallery with button and title in it. I have edited this (important) - "button" to tens of times to get it working, but still no results. It feels like the current 3D CSS, JQuery, Javascript and HTML image slider gallery doesn't work together with Video popUp box. I`m not sure, but it feels like. The working popUp video sample (demo) is <a href="https://www.kinobalss.lv/3d/player.html" rel="nofollow noreferrer">here</a> and I would like it to get this done combined with my 3D carousel(slider) image gallery. When I put few script lines from working sample to the gallery page i got no response from the script lines. Like the 3D gallery blocked the popUp video box and it does not show up.</p>
  
  <p>My goal : I want to get popUp video box over the 3D image gallery slider.
  Problem : PopUp box doesn't respond (not working), it is not displayed over the 3D gallery slider, after button (Watch movie) click.</p>
  
  <p>Here it is the full code of 3D carousel image gallery and working popUp video box. To make it easier for you i put all the source links for this script sample, so you can just create your own index.html file with this script.</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;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;3D Smooth Carousel - Slider&lt;/title&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'&gt;
    &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/magnific-popup.min.css"&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"&gt;
    &lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'&gt;
  
    &lt;link rel="stylesheet" href="https://kinobalss.lv/3d/css/style.css"&gt;
  
    &lt;style type="text/css"&gt;
      /* Popup container - can be anything you want */
      .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
  
      /* The actual popup */
      .popup .popuptext {
        visibility: hidden;
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
      }
  
      /* Popup arrow */
      .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
      }
  
      /* Toggle this class - hide and show the popup */
      .popup .show {
        visibility: visible;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
      }
  
      /* Add animation (fade in the popup) */
      @-webkit-keyframes fadeIn {
        from {
          opacity: 0;
        }
  
        to {
          opacity: 1;
        }
      }
  
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
  
        to {
          opacity: 1;
        }
      }
  
      .popuptext {
        display: none;
      }
  
      .mfp-hide {
        display: none !important;
      }
  
      .button {
        padding: 20px 40px;
        border-color: #f3f3f3;
        font-size: 17px;
        font-size: 1.7rem;
        font-family: "museo-sans", Arial, Verdana;
        font-weight: 500;
        margin-top: 40px;
        display: inline-block;
      }
  
      .button {
        border: 2px solid #fcf;
        color: #000;
        text-transform: uppercase;
        transition: all 0.15s ease-in-out;
      }
  
      .button .fa {
        margin-left: 20px;
      }
  
      .button:hover {
        background-color: #07d;
      }
  
      * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: none;
      }
  
      .content {
        text-align: center;
      }
    &lt;/style&gt;
    &lt;script type="text/javascript"&gt;//&lt;![CDATA[
  
        window.onload=function(){
    
    $('#videoLink')
    .magnificPopup({
          type:'inline',
          midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
      })
  
        }
  
      //]]&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="slider-container" id="slider"&gt;
  
      &lt;div class="slider-content"&gt;
  
        &lt;div class="slider-single"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"&gt;
          &lt;img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="1" /&gt;
          &lt;a class="slider-single-download" href="#videoStory" id="videoLink"&gt;Watch movie &lt;i class="fa fa-play-circle" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div id="videoStory" class="mfp-hide" style="max-width: 75%; margin: 0 auto;"&gt;&lt;iframe width="853" height="480" src="https://www.kinobalss.lv/media/tvantena.mp4" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;
            &lt;h1 class="slider-single-title"&gt;Through the Mountains&lt;/h1&gt;
            &lt;a class="slider-single-likes" href="javascript:void(0);"&gt;
              &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
              &lt;p&gt;311,247&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;!--- Down below is only other 3D carousel image slider script lines. Those are not immportant. I`m working on this the first image from slider gallery, sample Above. Rest of these lines are because of full page script.  //--&gt;
  
          &lt;div class="slider-single"&gt;
            &lt;img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="2" /&gt;
            &lt;a class="slider-single-download" href="javascript:void(0);"&gt;Skatīties filmu &lt;i class="fa fa-play-circle"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;h1 class="slider-single-title"&gt;Through the Mountains&lt;/h1&gt;
            &lt;a class="slider-single-likes" href="javascript:void(0);"&gt;
              &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
              &lt;p&gt;1,247&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="slider-single"&gt;
            &lt;img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="3" /&gt;
            &lt;a class="slider-single-download" href="javascript:void(0);"&gt;Skatīties filmu &lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;h1 class="slider-single-title"&gt;Through the Mountains&lt;/h1&gt;
            &lt;a class="slider-single-likes" href="javascript:void(0);"&gt;
              &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
              &lt;p&gt;1,247&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div class="slider-single"&gt;
            &lt;img class="slider-single-image" src="https://www.kinobalss.lv/images/img1.png" alt="4" /&gt;
            &lt;a class="slider-single-download" href="javascript:void(0);"&gt;Skatīties filmu &lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;h1 class="slider-single-title"&gt;Through the Mountains&lt;/h1&gt;
            &lt;a class="slider-single-likes" href="javascript:void(0);"&gt;
              &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
              &lt;p&gt;1,247&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;div class="slider-single"&gt;
            &lt;img class="slider-single-image" src="https://www.kinobalss.lv/images/img2.png" alt="5" /&gt;
            &lt;a class="slider-single-download" href="javascript:void(0);"&gt;Skatīties filmu &lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;h1 class="slider-single-title"&gt;Through the Mountains&lt;/h1&gt;
            &lt;a class="slider-single-likes" href="javascript:void(0);"&gt;
              &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
              &lt;p&gt;1,247&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="slider-single"&gt;
            &lt;img class="slider-single-image" src="https://www.kinobalss.lv/images/img3.png" alt="6" /&gt;
            &lt;a class="slider-single-download" href="javascript:void(0);"&gt;Skatīties filmu &lt;i class="fa fa-download"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;h1 class="slider-single-title"&gt;Through the Mountains&lt;/h1&gt;
            &lt;a class="slider-single-likes" href="javascript:void(0);"&gt;
              &lt;i class="fa fa-heart"&gt;&lt;/i&gt;
              &lt;p&gt;1,247&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;a class="slider-left" href="javascript:void(0);"&gt;&lt;i class="fa fa-arrow-left"&gt;&lt;/i&gt;&lt;/a&gt;
  
        &lt;a class="slider-right" href="javascript:void(0);"&gt;&lt;i class="fa fa-arrow-right"&gt;&lt;/i&gt;&lt;/a&gt;
  
      &lt;/div&gt;
  
      &lt;script src="https://kinobalss.lv/3d/js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>