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 )
Leave A Comment?