私のウェブページの動画にスクイーズバックを追加することに興味があります。
ビデオ自体の中に実装せずにこれを行う簡単な方法はありますか?
ID付きのdiv内にビデオを配置します。jqueryを使用して、ビデオ要素のサイズを変更します(おそらく%sを使用)。ビデオ要素の後に要素をdivに追加します(.appendElement())別のもので埋めます。
それは絶対divと重複します:
<div id="container">
<div id="background">contents here</div>
<div id="videoWrapper">
<video></video>
</div>
</div>
#container{
position:relative;
}
#container > *{
position:absolute; /*to allow stacking*/
top: 0; /*stretch to container*/
bottom:0;
left: 0;
right: 0
}
次に、ビデオを拡大縮小するには、要素の「拡大縮小」に関するこの投稿を見て、アスペクト比を維持します。
<video>
は他の要素と同様に HTML 要素であるため、CSS と JavaScript を使用してサイズを変更したり、他の要素を周囲や上に配置したりできます。
おそらく、相対的に配置された div 内にビデオを配置します。適切なタイミングで、少しスクリプトを使用してビデオを適切にスケーリングし、その上/下/横に完全に配置された要素を追加します。世界はあなたのカキです。試してみて、また報告してください!
考えてみれば、Mozilla のPopcorn.jsは、このような場合に役立つかもしれません。