Responsive YouTube Lightbox
HTML
<a class="js-rytl--link" href="https://www.youtube.com/watch?v=QLf9AeflvFg">Link 1</a>
<br/><br/><br/>
<a class="js-rytl--link" href="https://www.youtube.com/watch?v=5qvKVr54QvQ">Link 2</a>
CSS
/* responsive youtube lightbox v2.0.1 */
/*==============================================
do not style
===============================================*/
.rytl * {
box-sizing:border-box;
}
.rytl {
position: fixed;
bottom:0;
left: 0;
right:0;
top: 0;
display: table;
height: 100vh;
width: 100vw;
opacity:0;
-webkit-transition:opacity .14s ease-in;
-moz-transition:opacity .14s ease-in;
-o-transition:opacity .14s ease-in;
transition:opacity .14s ease-in;
z-index: 100001;
}
.rytl--wrapper {
display: table-cell;
vertical-align: middle;
}
.rytl--container {
height:auto;
margin: auto;
max-height: 394px;
max-width: 700px;
position: relative;
text-align: center;
width:100%;
}
@media (orientation: landscape) {
.rytl--container {
width:64vw;
}
}
@media screen and (min-width:1024px) and (min-height:536px) {
.rytl--container {
background-color: rgb(0, 0, 0);
height: 506px;
max-height: none;
max-width: none;
width: 900px;
}
}
@media screen and (min-width:1310px) and (min-height:768px) {
.rytl--container {
height: 720px;
width: 1280px;
}
}
.rytl--close { position: absolute; }
.rytl--fluid-width-video-wrapper {
padding:0;
position:relative;
width:100%;
}
.rytl--fluid-width-video-wrapper iframe {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
}
.rytl-transition-in {
opacity:1;
}
.rytl-transition-out {
opacity:0;
}
/*==============================================
responsive youtube lightbox overlay
style to your heart's desire
===============================================*/
/* :: overlay :: */
.rytl-theme {
background-color: rgb(0, 0, 0); /* RGBA Fallback */
background-color: rgba(0, 0, 0, 0.85);
font-size:11px;
}
/* :: closing button styles :: */
.rytl-theme .rytl-theme--close {
background-color:...
JavaScript
/* eslint-disable */
/*! modernizr 3.5.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-touchevents-setclasses !*/
!function(e,n,t){function o(e,n){return typeof e===n}function s(){var e,n,t,s,a,i,r;for(var l in c)if(c.hasOwnProperty(l)){if(e=[],n=c[l],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(s=o(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],r=i.split("."),1===r.length?Modernizr[r[0]]=s:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=s),f.push((s?"":"no-")+r.join("-"))}}function a(e){var n=u.className,t=Modernizr._config.classPrefix||"";if(p&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(o,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),p?u.className.baseVal=n:u.className=n)}function i(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):p?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function r(){var e=n.body;return e||(e=i(p?"svg":"body"),e.fake=!0),e}function l(e,t,o,s){var a,l,f,c,d="modernizr",p=i("div"),h=r();if(parseInt(o,10))for(;o--;)f=i("div"),f.id=s?s[o]:d+(o+1),p.appendChild(f);return a=i("style"),a.type="text/css",a.id="s"+d,(h.fake?h:p).appendChild(a),h.appendChild(p),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(n.createTextNode(e)),p.id=d,h.fake&&(h.style.background="",h.style.overflow="hidden",c=u.style.overflow,u.style.overflow="hidden",u.appendChild(h)),l=t(p,e),h.fake?(h.parentNode.removeChild(h),u.style.overflow=c,u.offsetHeight):p.parentNode.removeChild(p),!!l}var f=[],c=[],d={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var...