ProfiPHPProfiPHP
Категория: jQuery

Адаптивное видео YouTube с помощью jQuery

Как реализовать адаптивное видео с помощью CSS можно узнать на странице: Адаптивное видео YouTube с помощью CSS.

Также для реализации адаптивного видео можно использовать простой скрипт на Javascript с использованием библиотеки Jquery:
<script type="text/javascript">
jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
var video = jQuery(this);
video.attr( 'width', '100%' );
var video_width = video.width( );
video.css('height', video_width * 0.6, 'important');
});
</script>
Данный скрипт находит все Iframe с адресом Youtube и прописывает им ширину 100%, затем берет значение новой ширины умножает на 0.6 и присваивает новую высоту.

Если вы хотите, чтобы скрипт обрабатывал видео только при определенной ширине и меньше, можно использовать следующий вариант:
if ( $(window).width() <= 480 ) {
// Код Javascript
}

Добавить комментарий

Имя:
Текст комментария: