Mam wideo YouTube osadzone na naszej stronie internetowej i kiedy zmniejszam ekran do rozmiarów tabletu lub telefonu, przestaje on zmniejszać się przy szerokości około 560 pikseli. Czy to standard w przypadku filmów na YouTube, czy jest coś, co mogę dodać do kodu, aby go zmniejszyć?
youtube
responsive-design
embed
MattM
źródło
źródło
Odpowiedzi:
Możesz sprawić, by filmy z YouTube były responsywne dzięki CSS. Umieść element iframe w elemencie div z klasą „videowrapper” i zastosuj następujące style:
Element div .videowrapper powinien znajdować się wewnątrz elementu responsywnego. Wypełnienie na .videowrapper jest konieczne, aby zapobiec zwijaniu się wideo. Może być konieczne dostosowanie liczb w zależności od układu.
źródło
56.25%
i25px
można je przeczytać na alistapart.com/article/creating-intrinsic-ratios-for-videopadding-bottom: 56.25%
: Aby uzyskać stosunek 16: 9, musimy podzielić 9 przez 16 (0,5625 lub 56,25%).padding-top: 25px
: Aby uniknąć problemów z modelem zepsutego pudełka (IE5 lub IE6 w trybie dziwactw), używamy wyściółki do góry zamiast wysokości, aby stworzyć miejsce na chrom.Jeśli używasz Bootstrap, możesz również użyć responsywnego osadzania. To w pełni zautomatyzuje tworzenie responsywnych filmów.
http://getbootstrap.com/components/#responsive-embed
Poniżej znajduje się przykładowy kod.
źródło
col-sm-8 col-sm-offset-2
Użyłem CSS w zaakceptowanej odpowiedzi tutaj dla moich responsywnych filmów z YouTube - działało świetnie do czasu aktualizacji systemu YouTube na początku sierpnia 2015. Filmy na YouTube mają te same wymiary, ale z jakiegoś powodu CSS w zaakceptowanej odpowiedzi teraz skrzynki na listy wszystkie nasze filmy. Czarne paski na górze i na dole.
Sprawdziłem rozmiary i zdecydowałem się na pozbycie się górnej wyściółki i zmianę dolnej wyściółki na
56.45%
. Wygląda na to, że dobrze wygląda.źródło
Udoskonalone rozwiązanie obsługujące wyłącznie JavaScript dla YouTube i Vimeo przy użyciu jQuery.
Prosty w użyciu tylko z osadzaniem:
Lub z responsywną strukturą stylu, taką jak Bootstrap.
width="16" height="9"
)*=
selektora podciągów jQuery zamiast początku ciągu^=
Dzięki @Dampas za punkt wyjścia. https://stackoverflow.com/a/33354009/1011746
źródło
To stary wątek, ale znalazłem nową odpowiedź na https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Problem z poprzednim rozwiązaniem polega na tym, że musisz mieć specjalne divy wokół kodu wideo, które nie są odpowiednie dla większości zastosowań. Oto rozwiązanie JavaScript bez specjalnego div.
źródło
Rozwiązanie @ magi182 jest solidne, ale brakuje mu możliwości ustawienia maksymalnej szerokości. Myślę, że maksymalna szerokość 640 pikseli jest konieczna, ponieważ w przeciwnym razie miniatura youtube wygląda na piksele.
Moje rozwiązanie z dwoma owijkami działa dla mnie jak urok:
Ustawiłem również wyściółkę na dole w owijce wewnętrznej na 50%, ponieważ przy 56% @ magi182 pojawił się czarny pasek na górze i na dole.
źródło
Z kredytami do poprzedniej odpowiedzi https://stackoverflow.com/a/36549068/7149454
Kompatybilny z Boostrap, dostosuj szerokość kontenera (w tym przykładzie 300px) i gotowe:
źródło
Zobacz pełny opis tutaj i przykład na żywo tutaj .
resizeHeroVideo jest wywoływane dopiero po pełnym załadowaniu odtwarzacza YouTube (przy ładowaniu strony nie działa) i za każdym razem, gdy zmienia się rozmiar okna przeglądarki. Po uruchomieniu oblicza wysokość i szerokość elementu iframe i przypisuje odpowiednie wartości, zachowując właściwy współczynnik proporcji. Działa to niezależnie od tego, czy rozmiar okna jest zmieniany w poziomie czy w pionie.
źródło
Okay, wygląda na duże rozwiązania.
Dlaczego nie dodać
width: 100%;
bezpośrednio do elementu iframe. ;)Twój kod wyglądałby więc mniej więcej tak
<iframe style="width: 100%;" ...></iframe>
Spróbuj tego, to zadziała tak, jak w moim przypadku.
Cieszyć się! :)
źródło
Robię to za pomocą prostego CSS w następujący sposób
KOD HTML
KOD CSS
źródło