Czysty plugin responsywności dla YouTube

Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.

Pluginiarze to złamasy, bo często ładują do swoich kodów wszystko, co się tylko da. Na wszelki wypadek, żeby uratować świat i wszyscy byli szczęśliwi. A później, nie dość, że czasem te pluginy nie rozwiązują problemu, to jeszcze stają się furtką do infekcji kodu.

Dlaczego pluginy mogą nie rozwiązać problemu, do rozwiązania którego je instalujemy? Ano dlatego, że wiele zapisów w kodzie źródłowym, sposób przedstawiania treści zależny jest np. od konstrukcji szablonów, czy też wymuszony jest przez inne pluginy. Dlatego jestem zwolennikiem rozwiązań szytych na miarę. Tak, jak w tym przykładzie.

Strona z umieszczonym w edycji czystym linkiem do filmu w YouTube, np.

Copy Code

https://www.youtube.com/watch?v=BrUvQ3W3nV4

przedstawia się w kodzie źródłowym podglądu jako:

Copy Code


<p><iframe title="TYLKO NIE MÓW NIKOMU | dokument Tomasza Sekielskiego | cały film | 2019" width="500" height="281" src="https://www.youtube.com/embed/BrUvQ3W3nV4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>

Film się wyświetla, jasne, ale nie jest responsywny, tzn. istnieje w stałym, określonym rozmiarze, W 2024 roku to błąd techniczny, należy więc to zmienić. Można w edycji posta napisać kod responsywnego div’a i umieścić w nim link do embedu filmu na YouTube, ale to zadziała tylko w ramach danego wpisu. A że ja nie lubię się męczyć i klepać tego samego w innych postach, założyłem, że po wpisaniu w edycji posta normalnego linku do filmu na YouTube, reszta ma się zadziać sama. Oto solucja:

1. Utwórz plik o nazwie responsive_yt.php, zapisz go w folderze o tej samej nazwie.

2. W pliku umieść treść:

Copy Code


<?php

function responsive_youtube_embed($content) {
    // Regex do sprawdzania, czy dwa elementy blokowe nie są zagnieżdżone
    $pattern = '/<p>\s*(<iframe.*?src="https:\/\/www\.youtube\.com\/embed\/(.*?)".*?><\/iframe>)\s*<\/p>/i';

    // Funkcja do usuwania iframe'a oraz usuwania znacznika akapitu, jeśli poprzedza i zamyka tag iframe
    $callback = function ($matches) {
        $iframe = $matches[1];
        $video_id = $matches[2];
        // Sprawdzanie, czy przed div z responsywnym YT znajduje się odstęp, jeśli nie dodanie odstępu
        if (!preg_match('/<p>\s*<\/p>\s*$/', substr($matches[0], 0, -strlen($matches[0])))) {
            return '<p></p><div class="responsive-youtube-container">
                        <div class="responsive-youtube">
                            <iframe title="YouTube video player" src="https://www.youtube.com/embed/' . $video_id . '&rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                        </div>
                    </div>';
        } else {
            return '<div class="responsive-youtube-container">
                        <div class="responsive-youtube">
                            <iframe title="YouTube video player" src="https://www.youtube.com/embed/' . $video_id . '&rel=0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                        </div>
                    </div>';
        }
    };

    // Usunięcie iframe'a oraz znacznika akapitu
    $content = preg_replace_callback($pattern, $callback, $content);

    return $content;
}

add_filter('the_content', 'responsive_youtube_embed');

// CSS dla responsywnego wideo
function responsive_youtube_embed_styles() {
    echo '<style>
    .responsive-youtube-container {
        max-width: 1024px; /* Wartość dla szerokości kontenera treści */
        margin: 0 auto; /* Centrowanie kontenera */
        padding: 0; /* Padding dla kontenera */
    }
    .responsive-youtube {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
    }
    .responsive-youtube iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    </style>';
}

add_action('wp_head', 'responsive_youtube_embed_styles');

3. Zapisz zmiany w pliku.

4. Umieść folder na serwerze w lokalizacji /wp-content/plugins/

5. Włącz plugin w panelu wtyczek WordPress’a

Teraz kod osadzonego filmu powinien być responsywny i wyglądać tak:

Copy Code


<div class="responsive-youtube-container">
<div class="responsive-youtube">
<iframe title="YouTube video player" src="https://www.youtube.com/embed/BrUvQ3W3nV4?feature=oembed" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>

Jeśli chcesz wszystkie style mieć w jednym miejscu nie chcąc, żeby zarządzały nimi pluginy, usuń kod z funkcji responsive_youtube_embed_styles:

Copy Code


function responsive_youtube_embed_styles() { }

i zawartość przenieś (dopisz) do arkusza styli motywu (Narzędzie – Edytor plików motywu – styles.css):

Copy Code


.responsive-youtube-container {
max-width: 1024px; /* Wartość dla szerokości kontenera treści */
margin: 0 auto; /* Centrowanie kontenera */
padding: 0; /* Padding dla kontenera */
}
.responsive-youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
}
.responsive-youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}