Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <header></header>
<div class="container">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a ultrices lorem. Vivamus id mollis dolor. Nam finibus ante vel eleifend commodo. Aenean ligula lectus, tincidunt in maximus vitae, ultricies et mauris. Etiam volutpat vitae justo id tempus.
		Proin dignissim elit sit amet est fringilla hendrerit. Praesent enim nunc, vehicula ac ornare vitae, maximus placerat neque. Vivamus condimentum pellentesque odio, eget pellentesque odio tempus et. Nam nisi turpis, fermentum venenatis augue in, condimentum
		posuere ante. Etiam in quam sit amet est eleifend sollicitudin. Etiam laoreet, justo sit amet mollis malesuada, nisi nisl cursus sem, convallis posuere justo enim et urna.</p>

	<hr>

	<h2>Example #1 - Normal Banner (vimeo - youtube)</h2>
	<div data-player="vimeo" class="banner" data-vimeo="290738166.hd.mp4?s=ee27ae407692d8723a18b6c5e43356c7caac01a6" >
		<div data-embed="yEkWVQywXIE" data-width="560" data-height="315">
			<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg" />
		</div>
		<div class="caption">
			<h1>example caption</h1>
			<a class="play" data-id="1">Play Video</a>
		</div>
	</div>

	<p>Nulla fringilla cursus aliquet. Etiam pulvinar condimentum dui, non mollis libero hendrerit quis. Aenean sed velit imperdiet, ultricies mi vel, luctus ante. Praesent sagittis vulputate augue, quis porttitor mi bibendum vel. Sed sit amet iaculis mauris.
		Donec a imperdiet mi, id efficitur leo. In a mi egestas, facilisis erat quis, facilisis enim. Nulla in cursus urna, nec fringilla felis.</p>
	<hr>
	
		<h2>Example #2 - Vimeo Solo Banner</h2>
	<div data-player="vimeo-solo" class="banner" data-vimeo="290738166.hd.mp4?s=ee27ae407692d8723a18b6c5e43356c7caac01a6">
		<div data-embed="yt-id" data-width="560" data-height="315">
			<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg" />
		</div>
		<div class="caption">
			<h1>example caption</h1>
			<a class="play" data-id="2">Play Video</a>
		</div>
	</div>
	
	<hr />
	
	<h2>Example #3 Vimeo Solo Swap (vimeo - vimeo)</h2>
	<div data-player="vimeo-solo" data-mode="swap" class="banner" data-vimeo="290738166.hd.mp4?s=ee27ae407692d8723a18b6c5e43356c7caac01a6">
		<div data-embed="346432179.hd.mp4?s=d0d5b349d6f954db708ad85baf9bf46fc7e8ea1e" data-width="560" data-height="315">
			<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg" />
		</div>
		<div class="caption">
			<h1>example caption</h1>
			<a class="play" data-id="2">Play Video</a>
		</div>
	</div>

	<p>Nulla fringilla cursus aliquet. Etiam pulvinar condimentum dui, non mollis libero hendrerit quis. Aenean sed velit imperdiet, ultricies mi vel, luctus ante. Praesent sagittis vulputate augue, quis porttitor mi bibendum vel. Sed sit amet iaculis mauris.
		Donec a imperdiet mi, id efficitur leo. In a mi egestas, facilisis erat quis, facilisis enim. Nulla in cursus urna, nec fringilla felis.</p>
	<hr>
	
	<h2>Example #4 - Vimeo Solo with mode=static</h2>
	<div data-player="vimeo-solo" data-mode="static" class="banner" data-vimeo="290738166.hd.mp4?s=ee27ae407692d8723a18b6c5e43356c7caac01a6">
		<div data-embed="346432179.hd.mp4?s=d0d5b349d6f954db708ad85baf9bf46fc7e8ea1e" data-width="560" data-height="315">
			<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg" />
		</div>
		<div class="caption">
			<h1>example caption</h1>
			<a class="play" data-id="2">Play Video</a>
		</div>
	</div>
	
	<hr />
	
	<h2>Example #5 - Youtube Solo Static</h2>
	<div data-player="youtube" class="banner">
		<div data-embed="yEkWVQywXIE" data-width="560" data-height="315">
			<a class="play" data-id="3">Play Video</a>
			<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg">	
		</div>		
	</div>

	<p>Nulla fringilla cursus aliquet. Etiam pulvinar condimentum dui, non mollis libero hendrerit quis. Aenean sed velit imperdiet, ultricies mi vel, luctus ante. Praesent sagittis vulputate augue, quis porttitor mi bibendum vel. Sed sit amet iaculis mauris.
		Donec a imperdiet mi, id efficitur leo. In a mi egestas, facilisis erat quis, facilisis enim. Nulla in cursus urna, nec fringilla felis.</p>
	<hr>
	
	<h2>example testimonials [data-vimeo]</h2>
	<div data-player="vimeo" class="testimonials" data-vimeo="290738166.hd.mp4?s=ee27ae407692d8723a18b6c5e43356c7caac01a6">
		<p>Vivamus viverra dui eu aliquam sodales. Praesent finibus sapien eget odio sagittis feugiat. Sed nec vulputate justo. Phasellus maximus ornare purus, ut sagittis sem porttitor eu. Mauris a urna vitae nisl dictum convallis id ac nulla. Nullam aliquam
			ac elit at luctus. Nulla eget tempus quam. Etiam lacus mi, facilisis non erat a, tempus imperdiet sapien. Sed commodo turpis lorem, sit amet porttitor velit sodales nec. Integer pellentesque nulla nulla, ornare feugiat ex porta id. Aenean et mattis
			neque, nec iaculis ipsum. Pellentesque ac pretium tortor, id rhoncus quam. Vivamus condimentum quam sodales ante fringilla, vitae posuere magna laoreet. Etiam luctus mauris id nunc faucibus, eget dictum ligula commodo.</p>
		<div data-embed="yEkWVQywXIE" data-width="560" data-height="315">
			<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg">
			<a class="play" data-id="4">Play Video</a>
		</div>
	</div>

	<hr>
	<h2>lazy-load youtube [data-embed]</h2>
	<div class="youtube" data-embed="Ivx8TAcGKP8" data-width="560" data-height="315">
		<img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg">
	</div>
	<p>Nulla fringilla cursus aliquet. Etiam pulvinar condimentum dui, non mollis libero hendrerit quis. Aenean sed velit imperdiet, ultricies mi vel, luctus ante. Praesent sagittis vulputate augue, quis porttitor mi bibendum vel. Sed sit amet iaculis mauris.
		Donec a imperdiet mi, id efficitur leo. In a mi egestas, facilisis erat quis, facilisis enim. Nulla in cursus urna, nec fringilla felis.</p>

	<hr>
	<h2>example testimonials [data-embed]</h2>
	<div class="testimonials">
		<p>Vivamus viverra dui eu aliquam sodales. Praesent finibus sapien eget odio sagittis feugiat. Sed nec vulputate justo. Phasellus maximus ornare purus, ut sagittis sem porttitor eu. Mauris a urna vitae nisl dictum convallis id ac nulla. Nullam aliquam
			ac elit at luctus. Nulla eget tempus quam. Etiam lacus mi, facilisis non erat a, tempus imperdiet sapien. Sed commodo turpis lorem, sit amet porttitor velit sodales nec. Integer pellentesque nulla nulla, ornare feugiat ex porta id. Aenean et mattis
			neque, nec iaculis ipsum. Pellentesque ac pretium tortor, id rhoncus quam. Vivamus condimentum quam sodales ante fringilla, vitae posuere magna laoreet. Etiam luctus mauris id nunc faucibus, eget dictum ligula commodo.</p>
		<div class="youtube" data-embed="yEkWVQywXIE" data-width="560" data-height="315"><img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg"></div>
	</div>

	<hr>

	<h2>example vimeo [data-embed]</h2>
	<div class="vimeo elem-left" data-embed="187737602" data-width="560" data-height="315"><img alt="thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg"></div>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a ultrices lorem. Vivamus id mollis dolor. Nam finibus ante vel eleifend commodo. Aenean ligula lectus, tincidunt in maximus vitae, ultricies et mauris. Etiam volutpat vitae justo id tempus.
		Proin dignissim elit sit amet est fringilla hendrerit. Praesent enim nunc, vehicula ac ornare vitae, maximus placerat neque. Vivamus condimentum pellentesque odio, eget pellentesque odio tempus et. Nam nisi turpis, fermentum venenatis augue in, condimentum
		posuere ante. Etiam in quam sit amet est eleifend sollicitudin. Etiam laoreet, justo sit amet mollis malesuada, nisi nisl cursus sem, convallis posuere justo enim et urna.</p>

	<p>Vivamus viverra dui eu aliquam sodales. Praesent finibus sapien eget odio sagittis feugiat. Sed nec vulputate justo. Phasellus maximus ornare purus, ut sagittis sem porttitor eu. Mauris a urna vitae nisl dictum convallis id ac nulla. Nullam aliquam ac
		elit at luctus. Nulla eget tempus quam. Etiam lacus mi, facilisis non erat a, tempus imperdiet sapien. Sed commodo turpis lorem, sit amet porttitor velit sodales nec. Integer pellentesque nulla nulla, ornare feugiat ex porta id. Aenean et mattis neque,
		nec iaculis ipsum. Pellentesque ac pretium tortor, id rhoncus quam. Vivamus condimentum quam sodales ante fringilla, vitae posuere magna laoreet. Etiam luctus mauris id nunc faucibus, eget dictum ligula commodo.</p>

	<div class="youtube elem-right" data-embed="Ivx8TAcGKP8" data-width="560" data-height="315"><img alt="youtube thumbnail" class="thumbnail" src="https://img.youtube.com/vi/yEkWVQywXIE/maxresdefault.jpg"></div>

	<p>Sed luctus ipsum nunc, a pretium libero congue a. Vivamus fermentum non nisl sit amet placerat. Phasellus lobortis magna et sapien imperdiet mattis. Maecenas rutrum finibus odio, id vulputate eros commodo ut. Donec lacinia et mi quis maximus. Etiam et
		massa vitae odio efficitur porta eget in erat. Duis sed quam rutrum, consectetur tellus vel, tempor nulla. Fusce ornare, nunc sit amet dictum pellentesque, metus augue facilisis sapien, ac facilisis dolor leo tincidunt nunc. Cras commodo vel libero
		non faucibus. Etiam ultricies ut arcu quis tincidunt. Suspendisse ut lectus tincidunt, tempor dolor quis, consequat mi.</p>

	<p>Vivamus viverra dui eu aliquam sodales. Praesent finibus sapien eget odio sagittis feugiat. Sed nec vulputate justo. Phasellus maximus ornare purus, ut sagittis sem porttitor eu. Mauris a urna vitae nisl dictum convallis id ac nulla. Nullam aliquam ac
		elit at luctus. Nulla eget tempus quam. Etiam lacus mi, facilisis non erat a, tempus imperdiet sapien. Sed commodo turpis lorem, sit amet porttitor velit sodales nec. Integer pellentesque nulla nulla, ornare feugiat ex porta id. Aenean et mattis neque,
		nec iaculis ipsum. Pellentesque ac pretium tortor, id rhoncus quam. Vivamus condimentum quam sodales ante fringilla, vitae posuere magna laoreet. Etiam luctus mauris id nunc faucibus, eget dictum ligula commodo.</p>
	
</div>
              
            
!

CSS

              
                /* --- foundation --- */
*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body { padding-top: 100px; }
a { cursor: pointer; }
header {
	height: 100px;
	background-color: #ddd;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
}
.container {
	max-width: 800px;
	width: 90vw;
	margin: 0 auto;
}
video {
	display: block;
	width: 100%;
}
img {
	max-width: 100%;
}
.elem-left,
.elem-right {
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 45%;
	overflow: hidden;
}
.elem-left {
	float: left;
	margin-right: 10px;
}
.elem-right {
	float: right;
	margin-left: 10px;
}
.playing header { z-index:1 }
[data-player].playing { z-index:100; }

/* --- end foundation --- */
[data-player],
[data-vimeo], 
[data-embed] {
	position: relative;
}
[data-player] .play,
[data-embed] .close,
[data-vimeo] .close {
	background-color: #00a5be;
	color: #fff;
	padding: 11px;
	text-transform: uppercase;
}
[data-player] .play:hover,
[data-embed] .close:hover,
[data-vimeo] .close:hover {
	background-color: #464646;
	color: #fff;
}
[data-embed] .play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
[data-embed] .close {
	position: absolute;
	top: 0;
	right: 0;
}
[data-embed] .close i:before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.vimeo[class*="elem-"], .youtube[class*="elem-"] { width: 440px; }


.youtube, .vimeo {
	position: relative;
	cursor: pointer;
	width: 100%;
	font-size: 0;
}
.youtube:before,
.vimeo:before,
.vimeo:after,
.youtube:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.vimeo:before,
.youtube:before {
	content: "";
	background-color: #fff;
	width: 40px;
	height: 40px;
}

.vimeo:after,
.youtube:after {
	font-size: 70px;
	color: #ff0000;
	font-family: "fontello";
	font-weight: 400;
	margin: 0;
	font-style: normal;
	content: "\e80e";
}
.vimeo:after { color:rgb(0, 173, 239); }
.vimeo:hover:after, 
.youtube:hover:after { color: #4d4d4d; }

.vimeo.active:before, 
.vimeo.active:after, 
.youtube.active:before, 
.youtube.active:after { display: none; }



/* --- custom --- */
.banner .caption {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.playing.banner .caption {
	position: static;
	transform: none;
}

.testimonials {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
}
.testimonials > * {
	width: 48%;
}
.playing.testimonials > * {
	width: 100%;
}
@media only screen and (max-width: 900px) {
	.banner .caption {
		position: static;
		transform: none;
	}
	.testimonials > * {
		width: 100%;
	}
}

              
            
!

JS

              
                /* get device */
function getOS() {
	var userAgent = navigator.userAgent || navigator.vendor || window.opera;
	if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i) || userAgent.match(/iPod/i)) {
		return 'iOS'
	} else if (userAgent.match(/Android/i)) {
		return 'Android'
	} else {
		return 'unknown'
	}
}

/* retrive embed video */
(function ($) {
	$.fn.setupEmbed = function(player) {
		var videoSource;
		if (player=="youtube") {
			videoSource="https://www.youtube.com/embed/" + this.attr("data-embed") + "?rel=0&autoplay=1&playsinline=1&enablejsapi=1";
		} else if(player=="vimeo") {
			videoSource="https://player.vimeo.com/video/" + this.attr("data-embed") + "?&autoplay=1?title=0&byline=0&portrait=0";
		}
		
		iframe = document.createElement("iframe");
		iframe.setAttribute("frameborder", "0");
		iframe.setAttribute("allowfullscreen", "");
		iframe.setAttribute("width", this.attr("data-width"));
		iframe.setAttribute("height", this.attr("data-height"));
		iframe.setAttribute("src", videoSource);
		this.prepend(iframe);
		var videoRatio = (iframe.height / iframe.width) * 100;
		iframe.style.position = 'absolute';
		iframe.style.top = '0';
		iframe.style.left = '0';
		iframe.style.right = '0';
		iframe.width = '100%';
		iframe.height = '100%';
		var wrap = document.createElement('div');
		wrap.className = 'fluid-vid';
		wrap.style.width = '100%';
		wrap.style.position = 'relative';
		wrap.style.paddingTop = videoRatio + '%';
		var iframeParent = iframe.parentNode;
		iframeParent.insertBefore(wrap, iframe);
		wrap.appendChild(iframe)
	}
})(jQuery);

$('.youtube, .vimeo').each(function () {
	var player = $(this).attr('class').split(' ')[0];
	//on play
	$(this).on("click", function () {
		$(this).find(".thumbnail").remove();
		for (var i = 0; i < $('iframe').length; i++) {
			$('iframe')[i].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
		}
		$(this).addClass("active").setupEmbed(player);
	});
});  

/* TNT Videos v1.4 */
/* lazyload for vimeo */
/* removed if empty youtube thumbnails */

/* v1.3 current */
/* SWAP for vimeo-solo option with data-mode="swap" */
/* Update/fix button's logic statements */

/* v1.2
/* Small update for vimeo with static mode, use data-mode="static" 
/* New responsive play append for mobile, use data-mobile-append-play="" 

/* v1.1
/* NEW Close button string option 
/* Fixed duplicate buttons 
/* Responsive Vimeo Solo ***must include .thumbnail */

/* ToDo:
/* Vimeo thumbnail see:
/* https://i.vimeocdn.com/video/726692981_960.webp */

(function($){ 
	$.fn.extend({          
		tntvideos: function(options) { 
			var defaults = {
				playButton: '.play',
				closeButton: '.close',
				closeButtonString: null,
				animate: true,
				offset: $("header").outerHeight(),
				offsetClose: 0,
				bodyPlaying: null,			
				mobileWidth: 900,
				mobileAppendPlay: null,
				onPlay: function() {},
				onClose: function() {}
			}                  
			options =  $.extend(defaults, options);			
			var vid_total = this.length - 1;
			return this.each(function(index) {		
				var o = options;			
				var closeBtn = o.closeButton.replace(/\./g, '');
				var vid_obj = $(this);
				var vid_type = vid_obj.data('player');								
				
				if ( $(window).width() > o.mobileWidth ) {
					if (vid_type == "vimeo-solo" && vid_obj.data("mode") == "static") {	
						//do nothing for now									 
					}	else if ( vid_type != "youtube") {
							$(this).find(".thumbnail").remove();	
							setupVimeo(vid_obj);	
					}
				}						
				
				if ($(window).width() < o.mobileWidth ) {								 				
						//append play button
						if (o.mobileAppendPlay != null && !$(this).data("mobile-append-play") ) { 		
							$(this).find(o.playButton).appendTo( $(this).find(o.mobileAppendPlay) );	
						} else if ( $(this).data("mobile-append-play") ) {
							$(this).find(o.playButton).appendTo( $(this).find($(this).data("mobile-append-play") ) );	
						} else {
							$(this).find(o.playButton).appendTo( $(this).find("[data-embed]") );								
						}
				}	
				
				//custom close button
				if (o.closeButtonString != null) {
					var closeBtnString = o.closeButtonString;
				} else {
					var closeBtnString = '<i class="icon-plus"></i> Close Video';
				}
				
				//PLAY BUTTON
				$(this).on("click", o.playButton, function () {		
					var vid_type = vid_obj.data('player');

					//check if user wants a header class
					if(o.bodyPlaying != null) {
						$("body").addClass(o.bodyPlaying.replace(/\./g, ''));
					}
					vid_obj.find(o.playButton).hide();
										
					//logic for player type
					if (vid_type=="vimeo") { //if vimeo
						vid_obj.find('video').remove();
						playVimeo(vid_obj, closeBtn, closeBtnString);							
					} else if (vid_type=="youtube") { //if youtube
						vid_obj.find('.thumbnail').hide();
						playYoutube(vid_obj, closeBtn, closeBtnString);
					} else if (vid_type="vimeo-solo") { //if vimeo-solo
						if(vid_obj.data("mode") == "swap") { // if vimeo-solo swap mode
							vid_obj.find('video').remove();
							vid_obj.find('.thumbnail').hide();
							playVimeo(vid_obj, closeBtn, closeBtnString);				
						} else if ($(window).width() < o.mobileWidth || vid_obj.data("mode") == "static") {	//if vimeo-solo static mode
							vid_obj.find('.thumbnail').hide();
							setupVimeo(vid_obj);
							playVimeoSolo(vid_obj, closeBtn, closeBtnString);			
						} else {
							//normal vimeo solo(legacy)
							playVimeoSolo(vid_obj, closeBtn, closeBtnString);
						}
					} 

					//on play stop all other videos
					for (var i = 0; i < $('iframe').length; i++) {
						$('iframe')[i].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
					}
					
					if ($(window).width() > o.mobileWidth && o.animate == true) {
						console.log(o.offset);
						console.log(vid_obj.position().top);
						if(vid_obj.data("offset") != null) { 
							$('html, body').animate({
								scrollTop: vid_obj.position().top
							}, 1000);	
						}else if(o.offset != null) {
							$('html, body').animate({
								scrollTop: vid_obj.offset().top - o.offset
							}, 1000);		
						}										
					}
					
					options.onPlay.call(this);
					return false;
				});
				//CLOSE BUTTON
				$(this).on("click", o.closeButton, function () {					
					var vid_obj = $(this).parents("[data-player]");	
					var vid_type = vid_obj.data('player');
					
					vid_obj.removeClass("playing");
					vid_obj.find(o.closeButton).remove();					
					vid_obj.find(o.playButton).show();
					vid_obj.find('.fluid-vid, iframe').remove();
										
					if(o.bodyPlaying != null) {
						$("body").removeClass(o.bodyPlaying.replace(/\./g, ''));
					}
					
					var vid_stop = true;
					if (vid_type == "vimeo") {
						if ( $(window).width() < options.mobileWidth || vid_obj.data("mode") == "static" ) {
							 vid_obj.find('video, iframe').remove();			
							 vid_obj.find(".thumbnail").show();
						} else {
							setupVimeo(vid_obj, closeBtn, closeBtnString);
						}
					} else if (vid_type == "youtube") {						
						vid_obj.find(".thumbnail").show();
					} else if (vid_type == "vimeo-solo") {						
						if ( $(window).width() < options.mobileWidth || vid_obj.data("mode") == "static" ) {
							  vid_obj.find('video, iframe').remove();		
								vid_obj.find(".thumbnail").show();
						} else if (vid_obj.data("mode") == "swap") {
							vid_obj.find('video').remove();	
							setupVimeo(vid_obj, closeBtn, closeBtnString);
						} else {
							playVimeoSolo(vid_obj, closeBtn, closeBtnString, vid_stop);
						}						
					}
					
					if($(window).width() > o.mobileWidth && o.animate == true) {
						$('html, body').animate({
							scrollTop: vid_obj.offset().top - o.offsetClose
						}, 1000);	}
					options.onClose.call(this);
					return false;
				});					
				if ( index == vid_total ){
					return false;
				} 			
			});	//end each loop
			
			function setupVimeo(vid_obj) {
				vid_obj
					.find("[data-embed]")
					.prepend('<video autoplay="true" muted="muted" loop="true" src="https://player.vimeo.com/external/' + vid_obj.data('vimeo') + '&profile_id=174"></video>');
			}
			
			function swapVimeo(vid_obj) {
				var embed_url = vid_obj.find("[data-embed]");
				console.log("is swap mobile");
				vid_obj
					.find("[data-embed]")
					.prepend('<video controls autoplay="true" src="https://player.vimeo.com/external/' + embed_url.data('embed') + '&profile_id=174"></video>');
			}		

			function playVimeo(vid_obj, closeBtn, closeBtnString) {
				vid_obj.addClass("playing").find("[data-embed]")
					.append('<a class="' + closeBtn + '">' + closeBtnString + '</a>');
				if (vid_obj.data("mode") == "swap") {
					swapVimeo(vid_obj);
				} else {
					vid_obj.find("[data-embed]").setupEmbed('youtube');
					vid_obj
					.find("video, .thumbnail")
					.hide();
				}				
			}
			//extra function to setup vimeo legacy code		
			function playVimeoSolo(vid_obj, closeBtn, closeBtnString, vid_stop) {
				var video = vid_obj.find("video");					
				if (vid_stop) {	
					vid_obj.removeClass("playing");
					video.attr({
						"controls": "false",
						"muted": "true",
						"loop": "true"
					});
					video[0].muted = 1;
					video[0].controls = 0;
					video[0].play();
				}else {    
					vid_obj.addClass("playing")
						.find("[data-embed]")
						.append('<a class="' + closeBtn + '">' + closeBtnString + '</a>').find(".thumbnail").hide();
					video.attr({
						"controls": "true",
						"muted": "false",
						"loop": "false"
					});
					video[0].currentTime = 0;
					video[0].muted = 0;
					video[0].controls = 1;
				}				
			}

			function playYoutube(vid_obj, closeBtn, closeBtnString) {
				vid_obj.addClass("playing").find("[data-embed]")
					.append('<a class="' + closeBtn + '">' + closeBtnString +'</a>');
				vid_obj.find(".thumbnail").hide();
				for (var i = 0; i < $('iframe').length; i++) {
					$('iframe')[i].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
				}
				vid_obj.addClass("active").find('[data-embed]').setupEmbed(vid_obj.data("player"));
			}
		}
	});
})(jQuery);

$(function () {			
	//tntvideos
	$("[data-player]").tntvideos({		
		playButton: '.play',
		closeButton: '.close',
		closeButtonString: '<span><i class="icon-plus"></i></span>',
		mobileWidth: 900
	});		
});
              
            
!
999px

Console