<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" ></script>
<div class="gallery">
  <div class="vd__Wrap">
    <div class="vd__Section">
      <div class="popup-gallery">  
        {% for item in module.youtube_video_gallary %}
          {% if item.video_thumbnail_image.src %}
            <div class="col__{{ module.select_column_layout }}V">
              <div class="video_Cover">
                <div class="video_thumb">
                  <img src="{{ item.video_thumbnail_image.src }}" alt="{{ item.video_thumbnail_image.alt }}" /> 
                </div>
                <a href="{{ item.youtube_video_url.href }}" class="video play_icn" video-url="{{ item.youtube_video_url.href }}" style="cursor: pointer;"> 
                  <img src="{{ module.play_icon_image.src }}"> 
                </a> 
              </div>
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </div>              
  </div>
</div>

          
        

          
            .vd__Wrap {
	display: block;
	width: 100%;
	max-width: 1260px;
	margin: 30px auto;
}
.vd__Section {
	display: inline-block;
	text-align: center;
	width: 100%;
	margin: 20px 0;
}
.video_Cover {
	display: inline-block;
	width: 100%;
	box-shadow: 0px 0px 20px 0px rgba(12, 11, 11, 0.5);
	-moz-box-shadow: 0px 0px 20px 0px rgba(12, 11, 11, 0.5);
	-webkit-box-shadow: 0px 0px 20px 0px rgba(12, 11, 11, 0.5);
	background-position: right bottom;
	position: relative;
}
.video_thumb img {
	width: 100%;
}
.video_Cover .play_icn.video {
	width: 66px;
	height: 48px;
	text-align: center;
	display: inline-block;
	background: #007AAC;
	position: absolute;
	left: 0;
	bottom: 0;
}
.video_Cover .play_icn.video img {
	vertical-align: middle;
	border-style: none;
	margin-top: 12px;
	width: 20px;
}
.play_icn:hover {
	background:#202125 !important;
}
.col__1V, .col__2V, .col__3V {
	display: inline-block;
	width: 45%;
	margin: 15px 2%;
}
.col__1V {
	width: 50%;
}
.col__3V {
	width: 29%;
}
@media only screen and (max-width: 1023px) {
.col__1V {
	width: 70%;
}
.col__3V {
	width: 45%;
}	
}
@media only screen and (max-width: 767px) {
.col__2V, .col__3V {
	width: 70%;
}	
}
@media only screen and (max-width: 600px) {
.col__1V, .col__2V, .col__3V {
	width: 100%;
	margin: 15px 0;
}	
.vd__Wrap {
	width: 94%;
}
}
          
        

          
            jQuery(document).ready(function() {    	
  setTimeout(function() {
    jQuery('.popup-gallery').magnificPopup({
    		delegate: 'a',
    		type: 'image',
        callbacks: {
          elementParse: function(item) {
            // Function will fire for each target element
            // "item.el" is a target DOM element (if present)
            // "item.src" is a source that you may modify
            console.log(item.el.context.classList[0]);
            if(item.el.context.classList[0] == 'video') {
              item.type = 'iframe',
              item.iframe = {
                 patterns: {
                   youtube: {
                     index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

                     id: 'v=', // String that splits URL in a two parts, second part should be %id%
                      // Or null - full URL will be returned
                      // Or a function that should return %id%, for example:
                      // id: function(url) { return 'parsed id'; } 

                     src: '//www.youtube.com/embed/%id%?autoplay=1&rel=0', // URL that will be set as a source for iframe. 
                   },
                   vimeo: {
                     index: 'vimeo.com/',
                     id: '/',
                     src: '//player.vimeo.com/video/%id%?autoplay=1'
                   },
                   gmaps: {
                     index: '//maps.google.',
                     src: '%id%&output=embed'
                   }
                 }
              }
            } else {
               item.type = 'image',
               item.tLoading = 'Loading image #%curr%...',
               item.mainClass = 'mfp-img-mobile',
               item.image = {
                 tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
               }
            }

          }
        },
    		gallery: {
    			enabled: true,
    			navigateByImgClick: true,
    			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
    		},
        
    	});
  }, 1200 );
});