Sea Life So Awesome!
Background Video with aspect-ratio
HTML
<!--more個別投稿ページをご覧ください--> <div class="container"> <div class="content"> <h1 class="title">Sea Life So Awesome!</h1> </div> <video autoplay="true" class="video" loop="true" muted="true"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source> <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source> </video> </div>
CSS
@raindrops .single #post-3281{ width:100%; max-width:100%; } @raindrops .single #post-3281 article{ max-width:100%; width:100%; padding:0; } .posted-on{ display:block; max-width:1000px; margin:auto; } .entry-content{ width:100%; } .container { width: 100vw; height: 100vh; overflow: hidden; position: relative; } .container:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 1; } .content { position: relative; max-width: 1008px; height: 100%; margin: 40vh auto; padding: 18px; z-index: 2; display: table; mix-blend-mode: difference; } .title { color: #fff; text-align: center; text-transform: uppercase; display: table-cell; vertical-align: middle; font-size: 72px; } .video { display: block; position: absolute; z-index: 0; width: 100%; height: auto; top: 0; right: 0; bottom: 0; left: 50%; transform: translateX(-50%); margin: auto; z-index:-1; } @media screen and (max-aspect-ratio: 239 / 100) { .video { width: auto; height: 100%; } }