Cum să facem ca youtube embed să fie responsive

Configurare noua (How To)

Situatie

Pentru că foarte mulți dintre noi dorim să adăugăm filmulețe de pe youtube în site-ul nostru și întâmpinăm probleme atunci când pagina este accesată folosind diverse rezoluții sau de pe alt dispozitiv decât desktop am creat un mic tutorial cum să rezolvăm aceastră problemă.

Solutie

Pasi de urmat

Adăugăm următorul cod în CSS-ul nostru:

   .video-youtube {

position: relative;

padding-bottom: 40%;

padding-top: 20px;

overflow: hidden;

height: 0;

}

 

.video-youtube iframe,

.video- youtube object,

.video- youtube embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

 

Pentru codul HTML se va folosii următorul cod:

   <div class=”video-youtube”>

<iframe src=”https://www.youtube.com/watch?v=HE4oiWOb9dU” frameborder=”0″ width=”560″ height=”315″></iframe>

</div>

( după cum vedeți am adăugat clasa video-youtube la iframe-ul filmulețului pe care dorim să îl incorporăm în site )

Tip solutie

Permanent

Voteaza

(1 out of 3 people found this article helpful)

Despre Autor

Leave A Comment?