WordPressdə YouTube Videosunun Responsiv Olmaması
YouTube-dan çəkdirdiyiniz videolar embed kodu ilə iFrames kimi işləyir. Youtube videolarının düzgün görünməmə problemi ilə rastlaşmışam. Bəzən mövzuya görə, bəzən isə plugin səbəbindən. Xoşbəxtlikdən, veb saytınıza uyğun olaraq bu gömülmüş videoları avtomatik olaraq yenidən boyutlandıra bilmək üçün WordPress Mövzuya əlavə edə biləcəyiniz kod youtube videolarının düzgün görünməmə problemini tam olaraq həll edəcək.
Bu kod iFrame-i div şəklində büküb bəzi sinifləri əlavə edir. Sonra CSS obyekti müvafiq 16:9 nisbətində yenidən yaradır.
Sınaqdan keçirmək üçün aşağıdakı kodu funksiyanıza əlavə edin.php faylına:
Görünüş > Mövzu redaktoru> sağ tərəfdə cari mövzunu tapın və sağ tərəfdə yenidən Select > basın. Funksiyaları.php faylı tapın və üst sətirdə php ilə başlayan kodu yapışdırın.
CSS kodlarını mövzu qurma panelinizdə Xarici CSS ilə əlaqəli olan hissəyə yapışdırın.
https://gist.githubusercontent.com/anthonyeden/5f676bfb31cc8bcb36e01d95f4e3d6b9/raw/29056c3daedc0974906302dc1e1d989bcdf16228/Responsive-YouTube-Embed-Wordpress-Filters.php
<?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);
});
.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%;
}