Responsywna ramka, czyli iframe tag w WordPressie

Próbowałeś lub próbowałaś kiedyś dodać na swojej stronie film z YouTube lub post z bloga? Jeżeli nie ramka iframe nie wyświetla się poprawnie mamy na to rozwiązanie!

Ramka iframe to nic innego jak tag, który pozwala na łatwe osadzanie na stronie treści z popularnych platform takich jak YouTube, WordPress, Vimeo, Twitter i wielu innych! Wykorzystując w prosty sposób funkcjonalność kodu HTML iframe możemy z łatwością zamieścić na stronie odtwarzacz wideo, czy też podgląd posta na WordPressie.

Niestety, sam WordPress choć obsługuje kod iframe, to jednak różnie bywa z efektem. Wszystko oczywiście zależy od szablonu, który stosujemy, ponieważ zdarza się, że twórca szablonu dostosowuje produkt do poprawnej (responsywnej) obsługi iframe. Co zrobić jednak, gdy jest inaczej i po wklejeniu np. linka do postu na WordPressie wasz wpis wygląda tak jak ten poniżej?

WordPress - kod iframe

Responsywna ramka Iframe

Jakiś czas temu wdrożyliśmy na naszej stronie siriuspro.pl całkowicie nowy szablon Jupiter i od podstaw przebudowaliśmy na nim całą stronę. O samym szablonie napiszemy więcej za jakiś czas, bowiem jest on prawie idealny… Dlaczego prawie? A no, dlatego, że ramka iframe, z której tak chętnie korzystamy na blogu nie była responsywna (była węższa od tekstu na stronie). Mało tego, znaleźliśmy błąd w stylach CSS, który zgłosiliśmy już twórcom i oczekuje na poprawkę.

Niestety twórcy Jupitera nie chcieli podjąć się stworzenia responsywnej ramki iframe, dlatego jako eksperci od WordPressa wzięliśmy to na swoje barki. Przeszukując cały internet znaleźliśmy na GitHubie rozwiązanie dobre, ale niepozbawione wad.

Po dodaniu do pliku functions.php poniższego kodu:

 function setup_theme( ) {
// Theme setup code...

// Filters the oEmbed process to run the responsive_embed() function
add_filter('embed_oembed_html', 'responsive_embed', 10, 3);
}
add_action('after_setup_theme', 'setup_theme');
/**
* Adds a responsive embed wrapper around oEmbed content
* @param string $html The oEmbed markup
* @param string $url The URL being embedded
* @param array $attr An array of attributes
* @return string Updated embed markup
*/
function responsive_embed($html, $url, $attr) {
return $html!=='' ? '

'.$html.'

' : '';
}

Oraz w pliku style.css kodu:

.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;

iframe, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

Ramka iframe wyglądała tak:

Ramka iframe w WordPressie

Naprawiamy… poprawkę dla iframe

Chcąc osiągnąć idealną, responsywną ramkę iframe rozdzieliliśmy obiekty w CSS oraz dodaliśmy klasę przypisaną do szablonu Jupiter .mk-video-container (wspomniany błąd). Dodatkowo ustawiliśmy padding-top i padding-bottom na 0px. Wystarczyło jeszcze usunąć wysokość obiektów iframe ustawioną na 100% i gotowe:

.embed-container, .mk-video-container { position: relative; padding-bottom: 0px; padding-top: 0px; height: 0; overflow: hidden; max-width: 100% !important; height: auto; } iframe, object, embed { position: absolute; top: 0; left: 0; width: 100% !important; }

Aby osiągnąć taki efekt musisz tylko zamienić kod CSS z GitHuba na ten zmodyfikowany przez nas:

.embed-container, .mk-video-container {
position: relative;
padding-bottom: 0px;
padding-top: 0px;
height: 0;
overflow: hidden;
max-width: 100% !important;
height: auto;
}
iframe, object, embed { 
position: absolute;
top: 0;
left: 0;
width: 100% !important;
}

Prawda, że łatwe? A jeżeli chcesz żebyśmy zrobili to za Ciebie napisz lub zadzwoń do nas – pomożemy!

Szukasz pomocy?

Napisz do nas.