6

背景がビデオである Web サイトを作成しようとしています。Spotify のホームページの背景のようなものを再現する方法を何日も探していましたが、うまくいかないようです。

私の問題は、高さをブラウザでスケーリングするか、幅を取得できるが、両方を取得できないことです。Spotify の Web サイトのビデオとは異なり、常にブラウザーに合わせて拡大縮小されるわけではありません。私は多くのことを試しましたが、それらのほとんどは覚えていません。この効果を達成するために 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>
4

4 に答える 4

7

画面に収まるコンテナ 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-22T09:22:32.167 に答える
0

私はこれを見つけました：

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

object-fit: cover; を使用します。あなたのビデオタグに

それは私のために働いた。

于 2018-01-04T22:06:52.153 に答える