CSS3の背景としてビデオを使用したいと思います。 background-videoプロパティはありませんが、この動作を実行することは可能です。フルサイズのビデオタグを使用しても、期待した結果が得られません。ビデオ上に表示する必要があるコンテンツがあります。
非JSである必要があります。それが不可能な場合は、サーバーサイドで変更を行い、結果としてビデオのスクリーンショットも提供する必要があります。
色付きのボックスを置き換えるビデオが必要です。
色付きのボックスは、単なるCSSボックスです。
<video>
を修正し、z-index:-1
を使用して他のすべての要素の後ろに配置してみませんか?
html, body { width:100%; height:100%; margin:0; padding:0; }
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video id="video" style="width:100%; height:100%">
....
</video>
</div>
<div class='content'>
....
コンテナ内でそれが必要な場合は、コンテナ要素ともう少しのCSSを追加する必要があります
/* HTML */
<div class='vidContain'>
<div class='vid'>
<video> ... </video>
</div>
<div class='content'> ... The rest of your content ... </div>
</div>
/* CSS */
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
これがあなたが探しているものだと思います。コンテナに合わせてビデオを自動的にスケーリングしました。
デモ: http://jsfiddle.net/t8qhgxuy/
ビデオの高さと幅は、常に親の100%に設定する必要があります。
HTML:
<div class="one"> CONTENT OVER VIDEO
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>
<div class="two">
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video> CONTENT OVER VIDEO
</div>
CSS:
body {
overflow: scroll;
padding: 60px 20px;
}
.one {
width: 90%;
height: 30vw;
overflow: hidden;
border: 15px solid red;
margin-bottom: 40px;
position: relative;
}
.two{
width: 30%;
height: 300px;
overflow: hidden;
border: 15px solid blue;
position: relative;
}
.video-background { /* class name used in javascript too */
width: 100%; /* width needs to be set to 100% */
height: 100%; /* height needs to be set to 100% */
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
JS:
function scaleToFill() {
$('video.video-background').each(function(index, videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height(),
val;
if (videoRatio < tagRatio) {
val = tagRatio / videoRatio * 1.02; <!-- size increased by 2% because value is not fine enough and sometimes leaves a couple of white pixels at the edges -->
} else if (tagRatio < videoRatio) {
val = videoRatio / tagRatio * 1.02;
}
$video.css('transform','scale(' + val + ',' + val + ')');
});
}
$(function () {
scaleToFill();
$('.video-background').on('loadeddata', scaleToFill);
$(window).resize(function() {
scaleToFill();
});
});
transform
CSSプロパティのおかげで、ビデオを任意のHTML要素の背景として簡単に設定できます。
このコードは、video-container
が画像に対して行うのと同じように、backgoround-position: center center; background-size: cover;
がすべての領域をカバーするクラスを持つdiv内のビデオを中央に配置します。
また、transform
技術を使用して、任意のHTML要素を垂直および水平に中央揃えできます。
<style>
.video-container {
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
}
video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<div class="video-container">
<video autoplay muted loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<h2>Your caption here</h2>
</div>