Come rendere questo un video responsive?

Ho un video di you tube in un wrapper.

 

Quando inserisco il seguente codice CSS, questo video tube è reattivo.

 /*** You tube video ***/ .featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;} .featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Ma NON è reattivo quando il wrapper si trova in un altro DIV . Ho questo codice anche in alcuni punti:

 

Come posso rendere questo video video reattivo quando è anche nel div utube-wrapper ?

Ho provato anche a seguire il codice .. ma non funziona.

 /*** You tube video ***/ .featured_video_plus { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;} .featured_video_plus iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .utube-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width: auto;} .utube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Basta estrarre -> larghezza 730 px e galleggiare a sinistra dall’involucro dell’utube

Una ansible soluzione:

// CSS e HTML

 .center-block-horiz { margin-left: auto; margin-right: auto; } .border-5px-inset-4f4f4f { border: 5px inset #4f4f4f; } .set-padding { padding: 30px; } .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom */ /* put following styles (necessary for overflow and scrolling handling on mobile devices) inline in .responsive-wrapper around iframe because not stable in CSS: -webkit-overflow-scrolling: touch; overflow: auto; */ } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #Iframe-Maison-Willem-Tell { max-width: 80%; max-height: 300px; overflow: hidden; } /* padding-bottom = h/w as % -- set aspect ratio */ .responsive-wrapper-wxh-600x480 { padding-bottom: 80%; }  

Il risultato può essere visualizzato in Pen Responsive Iframe – Base Code .

Il markup e il CSS e la logica dietro di essi sono presi da How to Make Responsive Iframes – è facile! e dagli iframe di ridimensionamento per la progettazione retriggers solo CSS .

Un punto saliente è rimuovere tutti gli stili dal tag . Stile con solo CSS, con l’eccezione di scorrimento e overflow di overflow che sono incorporati in stile nel wrapper

attorno a . Un altro punto è impostare la larghezza e l’altezza impostando la larghezza massima e l’altezza massima nel wrapper

attorno a .responsive-wrapper.

Il più esterno

non è necessario; è solo lì per mostrare gli effetti del padding e del bordo.

Per posizionare l’iframe rimasto puoi usare il flex box invece del float.