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