✅ Nowości, motywy, wtyczki WEB i WordPress. Tutaj dzielimy się wskazówkami i najlepszymi rozwiązaniami dla stron internetowych.

Jak osadzić responsywne wideo z YouTube w witrynie?

285

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

Źródło nagrywania: artisansweb.net

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów