body { width: 100%; min-height: 100vh; padding-bottom: 150px; background-image: linear-gradient(45deg, #F7CAC9 15%, #91A8D0 85%); } .h1 { margin: 2em; font-family: 'Dancing Script', cursive; color: rgba(white, .85); } .h2 { color: rgba(black,.45); } .wrap { display: flex; flex-wrap: wrap; justify-content: space-around; } .inner { width: 85%; // + .inner { margin-top: 100px; } } .movie { position: relative; height: 0; padding-top: 30px; padding-bottom: 56.25%; overflow: hidden; // &::after { position: absolute; z-index: 5; top: 0; left: 0;right: 0;bottom: 0; content: ''; background-color: rgba(gray,1); animation: showFromRight 1.6s 0.6s both; } // > iframe { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; transform: translate3d(100%,0,0); animation: frame 1.4s .9s both, opa 0s 1.4s both; } } @keyframes frame { from { transform: translate3d(100%,0,0); } to { transform: translate3d(0,0,0); } } @keyframes opa { from { opacity: 0; } to { opacity: 1; } } @keyframes showFromRight { 0% { transform: scale(0,1); opacity: 1 } 10% { transform-origin: right center; } 30% { transform: scale(1,1); } 60% { transform: scale(1,1); transform-origin: left center } 100% { transform: scale(0, 1); transform-origin: left center; opacity: 1 } }
<h1 class="h1">responsive iframe movie</h1> <div class="wrap"> <div class="inner"> <h2 class="h2">YouTube <br>ー</h2> <div class="movie"> <iframe src="//www.youtube.com/embed/0wCC3aLXdOw?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="inner"> <h2 class="h2">Vimeo <br>ー</h2> <div class="movie"> <iframe src="//player.vimeo.com/video/100426447" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </div> </div>