Lite YouTube Embeds — lepsza metoda osadzania filmów z YouTube na swojej stronie

Umieszczanie wideo z YouTube jest łatwe, ale zdziwisz się, ile dodatkowej wagi może dodać pojedyncze wideo z YouTube do Twoich stron internetowych. Przeglądarka musi pobrać ~800 kB danych (patrz zrzut ekranu) w celu renderowania samego odtwarzacza wideo YouTube. A te pliki są pobierane, zanim odwiedzający kliknie przycisk odtwarzania.

Osadzone wideo YouTube nie tylko zwiększa rozmiar bajtów stron internetowych, ale przeglądarka musi wykonać wiele żądań HTTP, aby renderować odtwarzacz wideo. Wydłuża to całkowity czas ładowania Twojej strony, wpływając tym samym na szybkość strony i kluczowy wynik Twojej witryny.

Inną wadą domyślnego kodu do umieszczania w YouTube jest to, że renderuje odtwarzacz wideo o stałych wymiarach i nie reaguje. Jeśli ludzie przeglądają Twoją witrynę na telefonie komórkowym, rozmiar odtwarzacza wideo może nie być odpowiednio dostosowany do małego ekranu.

Osadzaj filmy z YouTube bez zwiększania rozmiaru strony

Nieistniejący już Google+ wykorzystywał bardzo sprytną technikę osadzania filmów z YouTube. Gdy strona była początkowo wczytywana, Google+ umieszczał tylko miniaturę filmu z YouTube, a rzeczywisty odtwarzacz wideo był ładowany tylko wtedy, gdy użytkownik kliknął wewnątrz miniatury.

Obraz miniatury filmów na YouTube ma rozmiar około 15 kB, dzięki czemu jesteśmy w stanie zmniejszyć rozmiar stron internetowych o prawie MB.

Wersja demonstracyjna Lite YouTube Embed

Otwórz tę stronę demonstracyjną, aby zobaczyć, jak działa technika Google+. Pierwszy film na stronie jest osadzony przy użyciu domyślnego kodu IFRAME, podczas gdy drugi film używa wersji uproszczonej, w której film z YouTube jest ładowany tylko na żądanie.

Gdy użytkownik kliknie przycisk odtwarzania, obraz miniatury zostanie zastąpiony standardowym odtwarzaczem wideo YouTube z autoodtwarzaniem ustawionym na 1, dzięki czemu film będzie odtwarzany niemal natychmiast. Dużą zaletą jest to, że dodatkowy JavaScript YouTube jest ładowany tylko wtedy, gdy ktoś zdecyduje się obejrzeć osadzone wideo, a nie inaczej.

Lekkie i responsywne osadzania YouTube

Standardowy kod do umieszczania na YouTube wykorzystuje tag IFRAME, w którym szerokość i wysokość odtwarzacza wideo są stałe, co sprawia, że ​​odtwarzacz nie reaguje.

Nowy kod do umieszczania na żądanie w YouTube jest responsywny i automatycznie dostosowuje wymiary odtwarzacza na podstawie rozmiaru ekranu użytkownika.

Osadzaj filmy z YouTube w sposób responsywny — samouczek

Krok 1: Skopiuj i wklej następujący fragment kodu HTML w dowolnym miejscu na swojej stronie internetowej, w którym ma się pojawić wideo YouTube. Pamiętaj, aby zastąpić VIDEO_ID rzeczywistym identyfikatorem Twojego filmu w YouTube.

 < div class = " youtube-player " data-id = " VIDEO_ID " > </ div >

Nie przypiszemy wysokości i szerokości, ponieważ odtwarzacz wideo automatycznie zajmie szerokość elementu nadrzędnego, podczas gdy wysokość jest obliczana automatycznie. Możesz także wkleić wiele bloków DIV z różnymi identyfikatorami wideo, jeśli chcesz umieścić wiele filmów z YouTube na tej samej stronie.

Krok 2: Skopiuj i wklej kod JavaScript w dowolnym miejscu w szablonie internetowym. Skrypt znajduje wszystkie osadzone wideo na stronie internetowej, a następnie zastępuje elementy DIV miniaturami wideo i przyciskiem odtwarzania (zobacz demo).

 < script > /* * Light YouTube Embeds by @labnol * Credit: https://www.labnol.org/ */ function labnolIframe ( div ) { var iframe = document . createElement ( 'iframe' ) ; iframe . setAttribute ( 'src' , 'https://www.youtube.com/embed/' + div . dataset . id + '?autoplay=1&rel=0' ) ; iframe . setAttribute ( 'frameborder' , '0' ) ; iframe . setAttribute ( 'allowfullscreen' , '1' ) ; iframe . setAttribute ( 'allow' , 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' ) ; div . parentNode . replaceChild ( iframe , div ) ; } function initYouTubeVideos ( ) { var playerElements = document . getElementsByClassName ( 'youtube-player' ) ; for ( var n = 0 ; n < playerElements . length ; n ++ ) { var videoId = playerElements [ n ] . dataset . id ; var div = document . createElement ( 'div' ) ; div . setAttribute ( 'data-id' , videoId ) ; var thumbNode = document . createElement ( 'img' ) ; thumbNode . src = '//i.ytimg.com/vi/ID/hqdefault.jpg' . replace ( 'ID' , videoId ) ; div . appendChild ( thumbNode ) ; var playButton = document . createElement ( 'div' ) ; playButton . setAttribute ( 'class' , 'play' ) ; div . appendChild ( playButton ) ; div . onclick = function ( ) { labnolIframe ( this ) ; } ; playerElements [ n ] . appendChild ( div ) ; } } document . addEventListener ( 'DOMContentLoaded' , initYouTubeVideos ) ; </ script >

Krok 3: Skopiuj i wklej CSS przed zamykającym tagiem head szablonu internetowego.

 < style > .youtube-player { position : relative ; padding-bottom : 56.25% ; height : 0 ; overflow : hidden ; max-width : 100% ; background : #000 ; margin : 5px ; } .youtube-player iframe { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; z-index : 100 ; background : transparent ; } .youtube-player img { object-fit : cover ; display : block ; left : 0 ; bottom : 0 ; margin : auto ; max-width : 100% ; width : 100% ; position : absolute ; right : 0 ; top : 0 ; border : none ; height : auto ; cursor : pointer ; -webkit-transition : 0.4s all ; -moz-transition : 0.4s all ; transition : 0.4s all ; } .youtube-player img:hover { -webkit-filter : brightness ( 75% ) ; } .youtube-player .play { height : 72px ; width : 72px ; left : 50% ; top : 50% ; margin-left : -36px ; margin-top : -36px ; position : absolute ; background : url ( '//i.imgur.com/TxzC70f.png' ) no-repeat ; cursor : pointer ; } </ style >

Możesz zobaczyć lekką technikę osadzania YouTube w akcji na tej stronie Codepen.

Należy pamiętać, że przeglądarki Chrome i Safari na iPhonie i Androidzie umożliwiają odtwarzanie wideo HTML5 tylko po zainicjowaniu interakcji użytkownika. Blokują one wbudowane multimedia przed automatycznym odtwarzaniem, aby zapobiec niechcianemu pobieraniu przez sieci komórkowe.

Samouczki dotyczące umieszczania w YouTube

1. Osadź film z YouTube z wyciszonym dźwiękiem
2. Umieść film z YouTube jako tło swojej strony internetowej
3. Osadź tylko część filmu z YouTube