Jak osadzić responsywne wideo z YouTube w witrynie?
Umieszczanie filmów z YouTube na stronach internetowych jest obecnie powszechne. YouTube udostępnia kod iframe do umieszczenia filmu w witrynach internetowych. Jednak wideo renderowane za pomocą tego kodu iframe nie jest responsywne. Oznacza to, że na małych urządzeniach, takich jak telefon komórkowy, tablet, Twój film może nie wyglądać ładnie.
W rzeczywistości osadzone filmy z YouTube muszą być responsywne, aby zapewnić lepsze wrażenia użytkownika. W tym artykule dowiemy się, jak osadzić responsywne filmy z YouTube na swojej stronie internetowej.
Znalazłem 3 możliwe sposoby osiągnięcia naszego końcowego rezultatu. Zobaczmy to jeden po drugim.
Osadź responsywny film z YouTube za pomocą Bootstrap
Bootstrap to najpopularniejsze narzędzie frontendowe, które pomaga w tworzeniu responsywnych stron. Zapewnia również łatwe rozwiązanie, dzięki któremu Twój film w YouTube będzie responsywny.
Aby rozpocząć, musisz najpierw dołączyć plik CSS Bootstrap w następujący sposób. Jeśli używasz już Bootstrapa w swoim projekcie, pomiń ten krok.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />Następnie użyj następującego kodu HTML, aby osadzić wideo za pomocą Bootstrapa.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
</div>
</div>Zastąp symbol zastępczy VIDEO_ID rzeczywistym identyfikatorem filmu. Wypróbuj, a powinieneś zobaczyć, że Twój film działa dobrze na mniejszych urządzeniach.
Możesz przeczytać o tej metodzie osadzania w dokumentacji Bootstrap.
Responsywne wideo YouTube za pomocą Fancybox
Ta opcja jest nieco inna. Tutaj zamiast bezpośrednio wyświetlać wideo, wyświetlamy miniaturę wideo z YouTube. A następnie klikając miniaturę, Twój film zacznie się odtwarzać w wyskakującym okienku. Można to zrobić za pomocą fancybox.
Aby korzystać z Fancybox, musisz dołączyć do swojej witryny następujące pliki CSS i JS.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>Następnie umieść poniższy kod i gotowe.
<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
<img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>Lite YouTube Embeds
W pierwszej metodzie użyliśmy kodu iframe. Podczas korzystania z iframe przeglądarka musi pobrać prawie 800kB danych, aby wyrenderować wideo.
Korzystając z fancybox możesz zmniejszyć to obciążenie. Ale znowu musisz dołączyć ich CSS i JS. Zaleca się dodanie tych plików przez CDN, aby zwolnić obciążenie serwera.
Pracując nad tym tematem, natknąłem się na artykuł, który wyjaśnia osadzanie filmów z YouTube w inny sposób. Nie musi używać elementu iframe podczas ładowania strony ani dołączać żadnych plików.
Artykuł zawiera kod, który każdy może łatwo dodać do swojej aplikacji. Postępuj zgodnie z artykułem Lite YouTube Embeds i dodaj kod zgodnie z sugestią.
Oto 3 możliwe sposoby osadzania responsywnego filmu z YouTube. W zależności od Twoich wymagań możesz wybrać dowolne rozwiązanie.
Powiązane artykuły
- Jak uzyskać listę filmów z YouTube na swoim kanale?
- Jak korzystać z interfejsu API YouTube do przesyłania filmów na kanał YouTube
- Jak uzyskać tagi wideo YouTube za pomocą interfejsu API YouTube