iframe reattiva con div fisso sotto di esso

Question

Data la seguente struttura DOM:

<div> 
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo></iframe> 
</div> 
<div id="bottom-bar">Lorem Ipsum</div> 

(See this JSFiddle for details and the styles I am already using)

Come posso raggiungere il # bottom-bar da fissare sul fondo mentre il video su di esso rimane reattivo e si adatta allo spazio che ha a disposizione, senza interferire con la barra in basso? Sto pensando di realizzare una tipica esperienza di video player con una barra di scorrimento/informazioni che è sempre al di sotto di essa.

Preferirei una soluzione solo CSS.

Answer 1

solo risolvere un top iframe involucro, sinistra, destra, e impostare una serie di px dal basso e dare il tuo iframe una larghezza e un'altezza di 100 % al suo interno quindi aggiusta la barra in basso.In questo modo:

Ecco un violino Fiddle Demo

<div class="iframe-wrapper"> 
    <iframe src="https://www.youtube.com/embed/Ycv5fNd4AeM?autoplay=1"></iframe> 
</div> 
<div class="bottom-wrapper"> 
    Bottom Wrapper 
</div> 

e CSS

.iframe-wrapper{ 
    position:fixed; 
    top:0;left:0;right:0;bottom:50px; 
} 
.iframe-wrapper iframe{ 
    width:100%; 
    height:100%; 
    border:none; 
} 
.bottom-wrapper{ 
    height:50px; 
    position:fixed; 
    bottom:0;left:0; 
    width:100%; 
} 

Answer 2

Hai solo bisogno di rendere il contenitore per il tuo video a larghezza e altezza, quindi rendere la barra di fondo fissata con CSS. Dovrai utilizzare JavaScript e apportare modifiche se vuoi assicurarti che il fondale in basso non si sovrapponga al video.

HTML:

<div class="video-container"> 
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe> 
</div> 
<div id="bottom-bar">Lorem Ipsum</div> 

Poi CSS:

body { 
    margin: 0; 
} 
.video-container { 
    width: 100%; 
} 
.video-container iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 
#bottom-bar { 
    position: fixed; 
    width: 100%; 
    background: white; 
    bottom: 0; 
} 

e assumendo avere jQuery, ecco il JavaScript:

$(function() { 
    var resizeVideo = function() { 
     $(".video-container, .video-container iframe").height($(document).height() - $("#bottom-bar").height()); 
    } 
    $(window).resize(resizeVideo); 
    resizeVideo(); 
}) 

Answer 3

HTML:

<iframe id="iframe" src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe> 
<div id="bottom-bar"> 
    Bottom bar 
</div> 

CSS:

#iframe { 
    position: relative; 
    width: 100%; 
    height: 500px; 
    border: 0; 
} 
#bottom-bar { 
    position: fixed; 
    bottom: 0px; 
    overflow-y: hidden; 
} 

Ecco un esempio: https://jsfiddle.net/7as89kk3/4/

Answer 4

Se si riesce a spostare leggermente il markup, farà più facile mantenere la barra relativa al contenitore:

<div class="video-container"> 
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo"></iframe> 
    <div id="bottom-bar">Lorem Ipsum</div> 
</div> 

Successivamente è possibile rendere reattivo il contenitore del video utilizzando this trick:

.video-container { 
    height: 0; 
    width: 100%; 
    padding-bottom: 56.25%; 
    position: relative; 
} 

.video-container iframe { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

Infine, il bastone la barra verso il basso:

#bottom-bar { 
    padding: 10px; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 100%; 
} 

vederlo in azione qui: https://jsfiddle.net/7qure8f5/1/

Answer 5

È possibile utilizzare diplay:table; e table-row per raggiungere questo

Ho fatto una #container per #theVideo e la #bottom-bar e fare il suo display:table;

Quindi #theVideo e #bottom-bar sarà display:table-row, ma faremo le #theVideo ha height:100%; quindi cercherò di essere al 100% dell'altezza, ma lascerà lo spazio di #bottom-bar

<div id="container"> 

    <div id="theVideo"> 
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe> 
    </div> 
    <div id="bottom-bar"><p>Lorem Ipsum</p></div> 

</div> 

CSS:

body { 
    background-color: black; 
    color: white; 
    margin: 0; 
} 
#container{ 
    position:absolute; 
    width:100%; 
    height:100%; 
    display:table; 
} 
#theVideo{ 
    display:table-row; 
    height:100%; 
} 
#theVideo iframe{ 
    width: 100%; 
    height: 100%; 
    border: none; 
} 
#bottom-bar{ 
    display: table-row; 
    background-color: rgb(51, 51, 51); 
} 
#bottom-bar p{ 
    margin:0; 
    padding:5px; 
} 

See la demo qui https://jsfiddle.net/pgr26vg0/2/

Answer 6

Provare a utilizzare flexbox. Tutti i browser moderni lo supportano, con prefixes funziona anche in IE10. Il piè di pagina può essere di altezza dinamica, quindi funziona anche quando il testo si avvolge. Ho anche spostato tutto lo stile in linea nel tuo esempio nel pannello CSS, per renderlo più facile da vedere.

jsFiddle

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: black; 
 
    color: white; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.video-player { 
 
    flex: 1; 
 
    position: relative; 
 
} 
 
.iframe { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 0; 
 
} 
 
.bottom-bar { 
 
    background-color: rgb(51, 51, 51); 
 
    padding: 5px; 
 
}

<div class="video-player"> 
 
    <iframe src="https://www.youtube.com/embed/TpBF_DRxWSo?autoplay=0&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" class="iframe"></iframe> 
 
</div> 
 
<div class="bottom-bar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et magna volutpat, hendrerit nisi nec, tincidunt risus. Aliquam eu massa et lectus cursus dapibus.</div>

Answer 7

che normalmente d'accordo con la risposta Drinkin popolare. Ma posso immaginare che avere tutto su posizioni fisse sia lontano dall'ideale su una pagina web. Così ho capito qualcos'altro che fa quello che vuoi, ma è anche scorrevole.

Il metodo si basa sulla funzione calc e sul vh (altezza viewport). Quindi, se decidi di utilizzare questo metodo, tieni presente se vuoi supportare i browser più vecchi.

Here is a fiddle

Innanzitutto impostare la larghezza del contenitore al 100% e la sua altezza di calc (100VH - 20 px). Il 20px è lo spazio specificato per la barra inferiore #.

Secondo, impostiamo la larghezza e l'altezza dell'iframe al 100%. Inoltre imposta i bordi su 0, perché ciò potrebbe causare un piccolo problema con le barre di scorrimento se non lo facciamo.

In terzo luogo, forniamo le dimensioni della barra inferiore. larghezza: 100% e altezza: 20px;

Ciò creerebbe un visualizzatore video a schermo intero, con la barra inferiore desiderata. Ho anche aggiunto "# more-stuff" per l'effetto di scorrimento opzionale. Rimuovilo solo se non vuoi l'effetto di scorrimento.

PS: Se si sostituisce l'altezza: calc (100vh - 20px); con altezza massima: calc (100vh - 20px). Dovrebbe funzionare anche all'interno di un contenitore div che cambia dimensione.

HTML

<div id="iframe-container"> 
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0"></iframe> 
    </div> 
    <div id="bottom-bar">Lorem Ipsum</div> 
    <div id="more-stuff"></div> 

CSS

body { 
    background-color: blue; 
    color: white; 
    margin: 0; 
} 
#iframe-container{ 
    height: calc(100vh - 20px); 
    width: 100%; 
} 
#iframe-container iframe{ 
    width: 100%; 
    height: 100%; 
    border: 0px; 
} 
#bottom-bar{ 
    width: 100%; 
    height: 20px; 
    background-color: black; 
} 
#more-stuff{ 
    width:100%; 
    height: 400px; 
    color: yellow; 
} 

Answer 8

È possibile utilizzare position:fixed per #bottom-bar e dare z-index:2, per la parte superiore div z-index:1 in linea

<body> 
 
<style> 
 
body { 
 
    background-color: black; 
 
    color: white; 
 
    margin: 0; 
 
} 
 
#bottom-bar{ 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t z-index: 2; 
 
\t width: 100%; 
 
} 
 
</style> 
 
    <div style="position: relative; display: block; height: 0px; padding: 0px 0px 56.25%; overflow: hidden;z-index:1;"> 
 
    <iframe src="https://www.youtube.com/embed/OYbXaqQ3uuo?autoplay=1&amp;cc_load_policy=0&amp;controls=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;rel=0&amp;showinfo=0" style="position: absolute; top: 0px; left: 0px; bottom: 0px; height: 100%; width: 100%; border: 0px;"></iframe> 
 
    </div> 
 
    <div id="bottom-bar" style="background-color: rgb(51, 51, 51); padding: 5px;">Lorem Ipsum</div> 
 
</body>

Answer 9

Qui andiamo ...

Sto assumendo che si desidera che il video si estendono all'intera regione disponibili sullo schermo ...

idea è di avere div contenente il video essere:

1. Figura altezza 100vh quindi rendere la larghezza 178vh (178% dell'altezza finestra cioè rapporto 16: 9) questo funzionerà un trattamento per la maggior parte schermi WHI ch sono 16: 9 hd per meno largo.
2. Per schermi ancora più ampi (non molto diffusi) si utilizza @mediamin-aspect-ratio per rendere il video a larghezza intera 100vw e impostare l'altezza come 56,25% della larghezza della finestra (56.25vh).

Così video è sempre più grande dello schermo disponibile sia in altezza, così come :-) larghezza

Poi centrarlo con positionabsolute; left, right, top e bottom come -999px quindi impostare marginauto perfetto centraggio del video sia orizzontalmente che verticalmente ;-)

Abbiamo aggiunto una classe video-container alla div contenente il video.

Ecco un violino,
https://jsfiddle.net/Luma4221/5/