Indiferent de platforma pe care o folosești, mereu există o problemă cu embeduirea videourilor astfel încât ele să fie responsive. Fie că vorbim de Youtube, Vimeo, Dailymotion etc. Și este foarte important ca și videoul să se plieze după rezoluția deviceului de pe care intrăm.
Vă voi arăta ce și cum folosind un clip pe care l-am realizat cu Lazăr acum 7 ani, pentru un site pe care îl făcusem noi la un moment dat.
<iframe src="https://www.youtube.com/embed/E0hW3IOo9qU" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
În primul rând pe orice temă responsive de WordPress, Drupal, Prestashop, Magento etc. clar va face afișarea videoului optimizată pentru orice device. Deoarece containerul are caracteristile necesare date din CSS. Sau există și posibilitatea ca în header să fie pus un JavaScript care să fluidizeze lucrurile de genul acesta.
Pentru că m-am lovit de problema asta atunci când aveam de lucru cu o platformă custom made, am decis să recurg la metoda CSS. Clientul avea nevoie să pună niște descrieri din backoffice pentru niște servicii. Practic ca la un magazin online, dar în mod catalog. Astfel că le-am făcut un câmp separat din PHP care crea un tabel nou în baza de date. În spate putea pune un embed de Youtube, dar care se vedea rău pe tabletă, foarte rău. Astfel că pentru rubrica respectivă am făcut un video wrapper, soțutie pe care am găsit-o pe stackoverflow:
.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Apoi wrapperul propriu-zis:
.video-wrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Urmează:
<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/E0hW3IOo9qU" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
