<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mican/pen/xrGLyW?limit=all&page=5&q=ifram" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">.video {
width: 38%;
margin: 3% 6%;
box-sizing: border-box;
text-align: center;
padding: 0;
position: relative;
}
iframe {
max-width: 100%;
border: 0;
box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
background: url("https://www.hpe.com/etc/clientlibs/hpeweb/img/hpe-featured-marquee/playButtonFrame.png") no-repeat center, rgba(0, 0, 0, 0.3);
background-size: auto 35%, auto;
}
html, body {
height: 100%;
}
main {
box-shadow: 0px 0px 2em rgba(0, 0, 0, 0.8);
background: -webkit-linear-gradient(top right, #7b4397, #dc2430);
background: linear-gradient(to bottom left, #7b4397, #dc2430);
padding: 3vmin 6vmin;
color: #FF2E63;
min-height: 100%;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-line-pack: start;
align-content: flex-start;
}
</style></head><body>
<main>
<figure class='video'>
<iframe allowfullscreen='' class='rv' frameborder='0' height='360' src='https://www.youtube.com/embed/BQ3y6QXQE3M?rel=0&controls=0&showinfo=0' width='640'></iframe>
</figure>
<figure class='video'>
<iframe allowfullscreen='' class='rv' frameborder='0' height='360' mozallowfullscreen='' src='https://player.vimeo.com/video/14407425?title=0&byline=0' webkitallowfullscreen='' width='640'></iframe>
</figure>
<figure class='video'>
<iframe allowfullscreen='' class='rv' frameborder='0' height='360' src='https://www.youtube.com/embed/MSiC1YAuZWM?rel=0&controls=0&showinfo=0' width='640'></iframe>
</figure>
<figure class='video'>
<iframe allowfullscreen='' class='rv' frameborder='0' height='360' mozallowfullscreen='' src='https://player.vimeo.com/video/110609319?title=0&byline=0' webkitallowfullscreen='' width='640'></iframe>
</figure>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >(function() {
var i, j, len, ref, responsiveVideo, rv,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
(function() {
var logo, logo_css;
logo = '<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>codepen-logo</title><path d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zM7.139 21.651l1.35-1.35a.387.387 0 0 0 0-.54l-3.49-3.49a.387.387 0 0 0-.54 0l-1.35 1.35a.39.39 0 0 0 0 .54l3.49 3.49a.38.38 0 0 0 .54 0zm6.922.153l2.544-2.543a.722.722 0 0 0 0-1.018l-6.582-6.58a.722.722 0 0 0-1.018 0l-2.543 2.544a.719.719 0 0 0 0 1.018l6.58 6.579c.281.28.737.28 1.019 0zm14.779-5.85l-7.786-7.79a.554.554 0 0 0-.788 0l-5.235 5.23a.558.558 0 0 0 0 .789l7.79 7.789c.216.216.568.216.785 0l5.236-5.236a.566.566 0 0 0 0-.786l-.002.003zm-3.89 2.806a.813.813 0 1 1 0-1.626.813.813 0 0 1 0 1.626z" fill="#FFF" fill-rule="evenodd"/></svg>';
logo_css = '.mM{display:block;border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);position:fixed;bottom:1em;right:1em;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all 240ms ease-in-out;transition:all 240ms ease-in-out;z-index:9999;opacity:0.75}.mM svg{display:block}.mM:hover{opacity:1;-webkit-transform:scale(1.125);transform:scale(1.125)}';
document.head.insertAdjacentHTML('beforeend', '<style>' + logo_css + '</style>');
document.body.insertAdjacentHTML('beforeend', '<a href="https://codepen.io/mican/" target="_blank" class="mM">' + logo + '</a>');
})();
responsiveVideo = (function() {
function responsiveVideo(video) {
this.video = video;
this.update = bind(this.update, this);
if (!this.video) {
return;
}
this.img = new Image(this.video.width, this.video.height);
this.img.onload = this.update;
this.img.src = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width%3D'" + this.video.width + "' height%3D'" + this.video.height + "' %2F%3E";
this.img.className = "rv-img rv-img-" + (document.querySelectorAll('.rv-img').length + 1);
this.img.setAttribute('style', 'position:absolute; top:0; left:0; opacity:0; pointer-events:none; width: auto; height: auto; max-width: 100%;');
this.video.parentNode.setAttribute('style', 'position:relative; padding:0;');
this.video.parentNode.appendChild(this.img);
window.addEventListener('resize', this.update);
}
responsiveVideo.prototype.update = function() {
var ref;
return ref = [this.img.width, this.img.height], this.video.width = ref[0], this.video.height = ref[1], ref;
};
return responsiveVideo;
})();
ref = document.querySelectorAll('.rv');
for (i = j = 0, len = ref.length; j < len; i = ++j) {if (window.CP.shouldStopExecution(1)){break;}
rv = ref[i];
window["rv" + i] = new responsiveVideo(rv);
}
window.CP.exitedLoop(1);
}).call(this);
//# sourceURL=pen.js
</script>
</body></html>
