ブラウザに常に合うようにサイズ変更された背景ビデオ

背景がビデオのウェブサイトを作成しようとしています。私はSpotify'sホームページの背景のようなものを再現する方法についての日を探してきましたが、それを機能させるように見えません。ブラウザに常に合うようにサイズ変更された背景ビデオ

私の問題は、高さをブラウザでも、幅でも、幅でも、両方ではなく、どちらでもかまいません。 Spotifyのウェブサイト上のビデオとは異なり、ブラウザに合わせて常に拡張されているわけではありません。私は多くのことを試みましたが、そのほとんどは覚えていません。この効果を得るためにJQueryを使用しても構いません。

私の現在のコードは次のとおりです。

<!DOCTYPE html> 
<html> 
<head> 
<title>VideoBG</title> 
<style type="text/css"> 


#videohome { 
    position:absolute; 
    height: 100%; 
    width: 100%; 

    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

</style> 
</head> 
<body> 


     <video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0"> 
      <source src="./homepage.mp4" type="video/mp4" /> 
     </video> 


</body> 
</html>

出典

2013-05-22 Lateral

jQueryのBigVideo.jsプラグインを見てください：http://dfcb.github.io/BigVideo.js/ – reinder

Spotifyのホームページには何も表示されていません。何らかの視差スクロールしか表示されません。 – LeBen

@LeBen：これは初めて自分のウェブサイトにアクセスした場合にのみ発生します。彼はこの特定のページを参照しています：https://www.spotify.com/en/video-splash – reinder

あなたが画面に収まるコンテナのdivを、持っている必要があり、その後、幅または高さにサイズを変更します動画にクラスを追加します。

CSS：

.container { 
width: 100%; 
height: 100%; 
position: absolute; 
padding:0; 
margin:0; 
left: 0px; 
top: 0px; 
z-index: -1000; 
overflow:hidden; 
} 

.videoPlayer { 
    min-height: 100%; 
    //min-width:100%; - if fit to width 
position:absolute; 
bottom:0; 
left:0; 
}

HTML：

<div class="container"><video class="videoPlayer">Code goes here</video></div>

出典

2013-05-22 09:22:32 cutoverRooster

オールディーズしかし、ゴールディ。これを自分自身で苦労してきましたが、アスペクト比のメディアクエリがうまく機能することがわかりました。

メディアクエリがサポートされていない場合でも、ビデオはそのページをカバーしますが、適切に拡大縮小されません。

translateX,translateYまたは@supportsがサポートされていない場合、ビデオは中央に配置されません。

HTML：

<div class="cover"> 

    <video autoplay loop mute poster="path/to/image.jpg"> 
     <source src="path/to/video.mp4" type="video/mp4" /> 
     <source src="path/to/video.webm" type="video/webm" /> 
     <source src="path/to/video.ogv" type="video/ogg" /> 
     <img src="path/to/image.jpg" alt="" /> 
    </video> 

</div>

CSS：

http://wesbos.com/css-object-fit/

使用目的フィット：

.cover { 
    bottom: 0; 
    left: 0; 
    overflow: hidden; 
    position: absolute; 
    right: 0; 
    top: 0; 
    z-index: 1; 
} 

.cover img, .cover video { 
    display: block; 
    height: auto; 
    left: auto; 
    max-width: none; 
    min-height: 100%; 
    min-width: 100%; 
    right: auto; 
    position: absolute; 
    top: 0; 
    width: auto; 
    z-index: 1; 
} 

@supports (transform: translateX(-50%)) { 

    .cover img, .cover video { 
     left: 50%; 
     top: 50%; 
     transform: translateX(-50%) translateY(-50%); 
    } 

} 

@media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */ 

    .cover img, .cover video { 
     max-width: 100vw; 
     min-width: 100vw; 
     width: 100vw; 
    } 

} 

@media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */ 

    .cover img, .cover video { 
     height: 100vh; 
     max-height: 100vh; 
     min-height: 100vh; 
    } 

}

出典

2017-10-27 12:50:35 shakyjake

私はこの見つけカバー。あなたのビデオタグに

私のために働いた。

出典

2018-01-04 22:06:52

この執筆時点では、依然としてオブジェクトフィットを完全にサポートしていないことに注意してください。タグでのみサポートしています。 https://caniuse.com/#search=objectfit –

上記のコメントによると、object-fitは、IEとEdge以外のすべてのビデオブラウザで機能します。マイクロソフトのデベロッパーフォーラムでアップルに投票できます： https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32011258-object-fit-and-object-position-for- all-media-elem？category_id = 86947その間にJSポリフィルを使用しますが、投票数が増えると実装されます。 –

ブラウザに常に合うようにサイズ変更された背景ビデオ

答えて

関連する問題