Youtube видео адаптивная вставка

Что бы сохранить пропорции и сделать адаптивный ютуб ролик на сайте:

add_filter('the_content', 'table_replace');
function table_replace ($content)
{   global $post;
	$pattern = "!<iframe(.*?)<\/iframe>!si"; 
	$replacement = '<div class="videoblock">\\0</div>';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

Этот код вставляем в functions.php он найдет любые iframe и обернет в div с классом videoblock.

Затем в style.css немного стилей для адаптации

.videoblock {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}
.videoblock iframe {
 position: absolute;
 top:0;
 left: 0;
 width: 100%;
 height: 100%;
}

В этом варианте ролик ютуб масштабируется сохранением пропорций.

Оставьте комментарий