responsive movie

by uto usui

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<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>

SCSS

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
  }
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Dancing+Script:400,700:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();