Video di sfondo che viene ridimensionato per adattarsi sempre al browser

Sto provando a creare un sito Web in cui lo sfondo è un video. Ho cercato giorni su come ricreare qualcosa come lo sfondo della homepage di Spotify's ma non riesco a farlo funzionare.Video di sfondo che viene ridimensionato per adattarsi sempre al browser

Il mio problema è che posso ottenere l'altezza in scala con il browser o la larghezza, ma non entrambe. A differenza del video sul sito web di Spotify, non è scalabile per adattarsi al browser in ogni momento. Ho provato molte cose, e molte di esse non ricordo. Non mi dispiace usare JQuery per ottenere questo effetto.

mio codice attuale è:

<!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>

fonte

2013-05-22 Lateral

Dai un'occhiata al plugin BigVideo.js per jQuery: http://dfcb.github.io/BigVideo.js/ – reinder

Non vedo alcun video sulla home page di Spotify, solo una sorta di scorrimento della parallasse. – LeBen

@LeBen: questo succede solo se visiti il loro sito web per la prima volta. Si riferisce a questa particolare pagina: https://www.spotify.com/en/video-splash – reinder

Avrete bisogno di avere un div contenitore, che si adatta allo schermo, e quindi aggiungere una classe al video che ridimensionarla per larghezza o altezza.

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>

fonte

2013-05-22 09:22:32 cutoverRooster

Oldie ma un Goldie. Sono stato alle prese con questo me stesso, ma ho trovato che le query dei media di aspetto rapporto fanno bene il lavoro.

Se le query multimediali non sono supportate, il video continuerà a coprire la pagina ma non verrà ridimensionata correttamente.

Se translateX, translateY o @supports non è supportato, il video non sarà centrato.

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:

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

}

fonte

2017-10-27 12:50:35 shakyjake

ho trovato questo:

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

Usa oggetto-fit: la copertura; sul tag video

Ha funzionato per me.

fonte

2018-01-04 22:06:52

Va notato che, al momento della stesura di questo, Edge non supporta ancora completamente l'adattamento degli oggetti. Supporta solo di usarlo sui tag . https://caniuse.com/#search=objectfit –

Come per il commento sopra, object-fit funziona in tutti i browser per i video, ad eccezione di IE e Edge.Puoi farlo votare sul forum Microsoft Developer qui: https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32011258-object-fit-and-object-position-for- all-media-elem? category_id = 86947 Usa un polyfill JS nel frattempo, ma se ottiene più voti sarà implementato. –

Video di sfondo che viene ridimensionato per adattarsi sempre al browser

risposta

Problemi correlati