Esempio di codice valido html5 responsive per video Youtube e Vimeo

Autore : vania Categoria : Open Source Mercoledì, 2 Settembre 2015 - 14:03

Ecco un semplice esempio di codice valido html5, responsive per i video youtube sul vostro sito:

Codice

<div style="width:98%;margin:auto">
<div style="
        position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;">
<object style="
        position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;"
        data="https://www.youtube-nocookie.com/embed/pRpeEdMmmQ0">
</object>
</div>
</div>

Ecco il risultato:

Ancora pi� comoda può essere la soluzione di inserire una classe CSS in un foglio di stile:

Codice

.video-responsive {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden
}
.video-responsive iframe,object,embed {
position:absolute;
top:0;left:0;
width:100%;
height:100%
}

E quindi baster� poi includere tutti gli object dei video all'interno di un div con la classe da noi creata:

Codice

<div class="video-responsive">
<object data="https://player.vimeo.com/video/96602728?color=b3b526"></object>
</div>

5 commenti show

Commento 5 di 5
Autore : vania - Sito web Martedì, 24 Novembre 2015 - 01:13

Anzi no, mi riferivo ad altri problemi che c'erno con il tag video.
Su new-cms la classe di cui sopra � gi� integrata, basta che metti questo codice:
<div class="video-responsive">
<object data="https://www.youtube-nocookie.com/embed/ID">
</object>
</div>
Ckeditor non lo modifica.