Jak zrobić responsywny film z YouTube w WordPress bez wtyczek

przez Nikołajenko Maksym · Opublikowany Wrzesień 4, 2021 · Zaktualizowano Wrzesień 4, 2021

Artykuł pojawił się z dwóch powodów, Nie znalazłem żadnych dobrych wtyczek do implementacji responsywnych filmów z YouTube, a ponieważ to zadziałało dla mnie, postanowiłem podzielić się z wami tym doświadczeniem.

W sumie, stworzenie innej strony internetowej dla klienta, Postanowił umieścić film na YouTube w artykule. Wtyczka, która była używana, został usunięty z niewiadomych przyczyn z repozytorium i zacząłem szukać rozwiązań i myśleć, Jak rozwiązać ten problem.

Aby wideo stało się adaptacyjne w Internecie, istnieje wiele przykładów, gdy jest on opakowany w oddzielny tag DIV i dodawane są do niego style., a wordPress nie ma domyślnego tagu, Dlatego pierwszą rzeczą do zrobienia jest dodanie haka, który będzie działał z częścią treści i zawinąć na przykład ramkę w żądanym tagu.

Przykład haka na adaptacyjny film w YouTube

<?php

add_filter('the_content', function($content) {
	return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);
});

add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {
	if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){
  		return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';
	} else {
	 return $html;
	}
}, 10, 4);


add_filter('embed_oembed_html', function($code) {
  return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code);
});

<?php

add_filter('the_content', function($content) {

return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content);

});

add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) {

if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){

return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>';

} else {

return $html;

}

}, 10, 4);

add_filter('embed_oembed_html', function($code) {

return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code);

});

Po utworzeniu haka i umieszczeniu go w pliku funkcji.php lub we wtyczce, Możesz przejść do łączenia stylów z motywem lub wtyczką. Poniżej podam przykład takich stylów..

Przykładowe style dla responsywnych danych wyjściowych YouTube

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

.embed-responsive {

position: relative;

display: block;

height: 0;

padding: 0;

overflow: hidden;

}

.embed-responsive .embed-responsive-item,

.embed-responsive iframe {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

border: 0;

}

.embed-responsive-16by9 {

padding-bottom: 56.25%;

}

Ten kod bardzo mi pomógł i mam nadzieję, że, Pomóż komuś innemu. Jeśli to pomogło, Z wdzięcznością przyjmę Twoje komentarze i opiszę Twoją sprawę. Być może twój przypadek pomoże rozwinąć ten artykuł. Twoje komentarze zachęcą mnie do napisania bardziej przydatnych materiałów.

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa