Według Mozilli, znaczniki iframe zawsze będą spowalniać stronę, gdyż jako element osadzony (tzw. browser context) do obsługi wymaga zwiększenia pamięci i innych zasobów komputera. Każda dodatkowa rama będzie pochłaniała kolejne zasoby, dlatego też wczytywanie się strony będzie spowolnione.
Według mnie, jedynym sposobem na „optymalizację” jest NieWczytywaie tych ramek a zastąpienie ich czymś innym np. wczytywanie Tylko miniaturki (obrazka) zamiast całej strony (stron!) z YouTube.
Miałem kiedyś podobny problem i poradziłem sobie z nim w ten właśnie sposób.
Nie osadzam filmu poprzez wklejenie do edytora linku z YouTube (WordPress automatycznie generuje ramke) tylko używam własnego znacznika [youtube].
Dzięki temu mam pełną kontrolę nad tym co i kiedy się wczytuje.
Aby później odtworzyć film, wystarczy kliknąć tą miniaturke.
Miniatura sprzężona jest z lightbox, film a więc ta ramka (iframe) wczytywany jest tylko wtedy, gdy gdy chcemy go odtworzyć.
Podam Ci gotową funkcje jakiej używam ja:
/*
Plugin Name: Znacznik YouTube
Plugin URI: https://www.facebook.com/WPSolucje/
Description: Dodawanie filmu z YouTube. Wstawienie znacznika [youtube] spowoduje wygenerowanie kontenera dla miniaturki filmu z YouTube, link bezpośredni i krótki opis.
Version: 1.0
Author: Paweł Nowak
Author URI: https://czystespalanie.info
*/
add_shortcode( 'youtube', 'czystespalanie__youtube' );
function czystespalanie__youtube( $atts, $content = null ){
wp_enqueue_script('lity');
wp_enqueue_style('lity');
$url = get_stylesheet_directory_uri();
$a = shortcode_atts( array(
'link' => '',
'float'=> ''
), $atts );
$float = ( $a['float'] ) ? ' float-' . $a['float'] : '';
);
$film_id = preg_match( "/(?<=v=|v\/|vi=|vi\/|youtu.be\/)[a-zA-Z0-9_-]{11}/", $a['link'], $match );
#sprawdzam czy film jest dostępny na podstawie miniaturki
$headers = @get_headers( 'https://img.youtube.com/vi/' . $match[0] . '/mqdefault.jpg' );
if ( strpos( $headers[0], '200') ) {
$img = '<img src="' . $url . '/images/play.png" class="card-title">';
} else {
$img = '<span class="badge badge-danger ml-1 mt-1 p-1">⚠ Film niedostępny</span>';
}
$output = '<figure class="col-6 col-sm-4 col-md-3 ' . esc_attr( $float ) . '">' . "\r";
$output .= '<div class="shadow card mb-4 box-shadow rounded-0">' . "\r";;
$output .= '<a href="' . esc_url( $a['link'] ) . '" data-lity><img class="card-img-top img-fluid rounded-0" src="https://img.youtube.com/vi/' . $match[0] . '/mqdefault.jpg"/></a>' . "\r";;
$output .= '<div class="card-img-overlay p-0 '. esc_attr( ( strpos( $headers[0], '200') ) ? '' : ' w-100 text-center' ) . '">';
$output .= '<a href="' . esc_url( $a['link'] ) .'" data-lity>' . $img . '</a>' . "\r";;
$output .= '</div>' . "\r";;
$output .= '<figcaption class="card-body text-center bg-light py-2 px-2">' . "\r";;
$output .= '<h6 class="h6 card-text font-weight-normal">' . trim( $content ) . '<a title="Link bezpośredni do YouTube" target="_blank" class="external-link float-right mt-3 pt-2" href="' . esc_url( $a['link'] ) . '"></a></h6>' . "\r";;
$output .= '</figcaption>' . "\r";;
$output .= '</div>' . "\r";;
$output .= '</figure>' . "\r";;
return $output;
}
Kod wklejam też na Pastebin.
Tą funkcję należy wstawić do pliku functions.php.
Należy również wcześniej zarejestrować skrypt i styl Lity, który możesz pobrać z tej strony.
Ja użyłem Lity, ale ty równie dobrze możesz wykorzystać inny Lightbox, taki który podoba się tobie.
Przykład użycia możesz zobaczyć na tej stronie.
Kod HTML i CSS jest dostosowany do biblioteki Bootstrap 4. Jeżeli nie używasz tej biblioteki na swojej stronie, dostosuj kod pod własny styl.
Jak używać znacznika? Przykład:
[youtube link="https://www.youtube.com/watch?v=SXj-rc2igoA"] Blue flame rocket stove. Wzorcowy płomień spalania pelletu (biomasy) [/youtube]
Pozdrawiam.
