Responzívne video

[Peter.31]

Mám nasledovné dva problémy pri vkladaní videa z YouTube na PrestaShop stránku:

1. Ako vložiť video tak, aby bolo responzívne? Video sa nezobrazuje správne v mobilných zariadeniach.

2. Pri vložení videa z YouTube nie je možné toto video maximalizovať na celú obrazovku. Ako je možné vyriešiť tento problém?

Za riešenie vopred ďakujem.

[Guest]

Ahoj.

Pro nastavení lze použít online nástroj na generování iframe podle parametrů.

https://www.classynemesis.com/projects/ytembed/

 

Dále vytvořit vlastní CSS styl

.youtube-container{
  position: relative;
  width: 100%;
  padding-bottom: 56%; 
  height: 0;
}
.youtube-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

V editoru stránky zobrazit zdrojový kód a zabalit iframe do vlastního div

<div class="youtube-container">
  <iframe src="https://www.youtube.com/watch?v=LXb3EKWsInQ?start=0&end=0&vq=hd1080&autoplay=1&rel=0&iv_load_policy=3&theme=light&fs=0&controls=0" width="560" height="315" frameborder="0"></iframe>
</div>