Nowoczesne strony internetowe czyli jak wstawić w WordPress responsywny film

 

 Wordpress youtube iframe responsive

 

 

 

 

 

 

Nowoczesne strony internetowe to nie tylko przemyślana identyfikacja wizualna marki i atrakcyjna treść, ale również dostosowanie do wczytywania na różnych urządzeniach, czyli responsive web design (RWD).

 

WordPress jest obecnie jednym z najczęściej wybieranych systemów zarządzania treścią. Jedną z korzyści tego systemu jest możliwość łatwego budowania i tworzenia responsywnych stron internetowych, w tym stron opartych o proste w obsłudze szablony. Niestety często pojawia się problem związany z osadzeniem filmu z kanału Youtube. O ile samo osadzenie filmu nie jest trudne (wystarczy w edytorze tekstowym wkleić ramkę iframe pobraną z Youtube), gorzej jest już z wyświetlaniem osadzonego filmu na urządzeniach mobilnych.

Istnieją oczywiście wtyczki które teoretycznie rozwiązują ten problem (np. Youtube Embed), natomiast w praktyce często okazuje się że nie działają one prawidłowo.

 

Nowoczesne strony internetowe nie zapominają o użytkownikach mobilnych

 

Obecnie treści video zaczynają „podbijać” internet. Pojawia się coraz więcej materiałów takich jak krótkie filmiki animowane lub materiały typu „video explainer”, przygotowywanych nie tylko przez znane marki, ale również przez małe i średnie firmy rodzinne. Dlatego prowadząc firmowego bloga czy stronę internetową warto pamiętać o użytkownikach mobilnych i tym że strona powinna być responsywna.

Jeżeli zainstalowanie wtyczek nie pomaga, problem można rozwiązać poprzez odpowiednie zmodyfikowanie iframe i pliku style.css, dzięki czemu możemy zaimplementować w serwisie ramkę youtube iframe responsive.

 

Jak w mniej niż 3 minuty sprawić aby film we wpisie WordPress był responsywny – instrukcja krok po kroku

 

Oto instrukcja krok po kroku co należy zrobić aby Twoja WordPress youtube iframe była responsywna:

Krok 1: Skopiuj ramkę iframe znajdującą się w sekcji „Udostępnij” w prawym dolnym rogu filmu Youtube który chcesz osadzić

Krok 2: Wklej ramkę w edytorze tekstowym, w miejscu w którym chcesz osadzić film

Krok 3: Zmodyfikuj ramkę youtube embed usuwając rozmiar okna (zaznaczone pogrubieniem):

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/ATNkX0_YD_M” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

Oto aktualny wygląd ramki w edytorze tekstowym:

<iframe src=”https://www.youtube.com/embed/ATNkX0_YD_M” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

Krok 4:  Dodaj do ramki następujący kod (pogrubione):

<div class=”video-container”> [TWOJA RAMKA] </div>             

Oto aktualny wygląd ramki (po doklejeniu kodu):

<div class=”video-container”> <iframe src=”https://www.youtube.com/embed/ATNkX0_YD_M” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe></div>

Krok 5: Zmodyfikuj plik Style.css doklejając w ostatnich linijkach następujący kod:

.video-container {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.video-container iframe, .video-container object, .video-container embed { position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Modyfikacji możesz dokonać na serwerze lub w edytorze WordPress. W przypadku modyfikacji w panelu WordPress, dla bezpieczeństwa warto zrobić backup strony.

 

About the author: admin

Leave a Reply

Your email address will not be published.