Нормальное растягивание плеера YouTube на 100% ширины и пропорционально по высоте

youtube-100w-wordpress.txt

Здесь описан код (для WordPress), позволяющий растянуть видео с Ютуба на 100% ширины текстового блока с сохранением пропорций по вертикали.
Сработает в случае, если видео в визуальном редакторе вставляется просто ссылкой http://joxi.ru/a2X7zlWIwMV6Zm
или кодом <iframe src="https://www.youtube.com/embed/nsuxoRkai7A" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>:
http://joxi.ru/Dr8oRa3Iojy7dA.



Нижеследующий код нужно разместить в style.css активной темы
или, чтобы не вносить изменение в код темы (что будет хорошей идеей с точки зрения простоты установки возможных обновлений),
добавьте код в дополнительные стили: Админка → Внещний вид → Настроить → Дополнительные стили: http://joxi.ru/EA4aLdKfo5bd8r.

.single .video-youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  background-color: #000000;
  margin-bottom: 20px;
}
.single .video-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



Нижеследующий код нужно разместить в functions.php активной темы (например, вот так: http://joxi.ru/DmB78gJIJk0X32)

add_filter('embed_oembed_html', 'man_yotube_w_100', 10, 4);
function man_yotube_w_100($html, $url, $attr, $post_ID) {
    if ( strpos($url, 'youtu') !== false ) {
        ob_start(); ?>
        <div class="video-youtube">
        <?php echo $html; ?>
        </div>
        <?php
        $html = ob_get_clean();
    }
    return $html;
}
add_filter( 'the_content', 'man_yotube_w_100_2' );
function man_yotube_w_100_2( $content ) {
    $pattern = '/(<iframe src="https:\/\/www.youtu[^>]+><\/iframe>)/i';
    $replacement = '<div class="video-youtube">$1</div>';
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}