• Страница 1 из 1
  • 1
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Адаптация видеороликов с Ютуб с помощью Js (Скрипт для плеера, который адаптирует видео с Youtube)
Адаптация видеороликов с Ютуб с помощью Js
workman
Дата: Среда, 04.07.2018, 15:33 | Сообщение 1
Гл. Модератор
Сообщений:1717
Награды: 9


Простой скрипт, который адаптирует видео с Youtube и не только, для любых устройств и разрешений экрана.
Например, у вас есть такой iframe c Youtube.



Код
<iframe src="ссылка" width="700" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Обращаем внимание, что у него в width содержится значение 700px. Это значит что на меньших экранах вашего сайта видео будет уходить за рамки сайта или обрезаться. Красиво? Не думаю!!
Добавляем скрипт в конец сайта и вы увидите, что все станет хорошо. 09a 04b
Код
<script>
    jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
        var td_video = jQuery(this);
        td_video.attr('width', '100%');
        var td_video_width = td_video.width();
        td_video.css('height', td_video_width * 0.6, 'important');
    });
</script>

Возможно кто-то захочет, чтобы скрипт отрабатывал не всегда, а только лишь для мобильных устройств, чья ширина меньше чем 480px. Тогда ставим так:
Код
<script>
if ( $(window).width() <= 480 ) {
    jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
        var td_video = jQuery(this);
        td_video.attr('width', '100%');
        var td_video_width = td_video.width();
        td_video.css('height', td_video_width * 0.6, 'important');
    });
}
</script>
Прикрепления: 8048425.png(36.6 Kb)
Страна: (RU)
waak
Дата: Среда, 04.07.2018, 15:49 | Сообщение 2
Друзья сайта
Сообщений:474
Награды: 12


Зачем скрипт? если можно через css?

Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372
Вебмани R234675901433
Киви 79094024545

http://talantlev.ucoz.ru Скрипты от автора помощь по uCoz
Страна: (RU)
Kosten
Дата: Среда, 04.07.2018, 16:02 | Сообщение 3
Администраторы
Сообщений:18094
Награды: 55


Цитата waak ()
Зачем скрипт? если можно через css?

waak, это хорошо для знаний, что можно через стили, а так через них делать. Так как workman, полный расклад дал.
Страна: (RU)
Kosten
Дата: Среда, 04.07.2018, 23:32 | Сообщение 4
Администраторы
Сообщений:18094
Награды: 55


Здесь тему создал на форуме по адаптивности плеера Ютуб. Где все создано на стилях. хотя они мне знакомы, так как ставил на сайт, где еще на сайте Вебочка из, там нашел, но здесь как понимаю некоторые стили, точнее классы добавлены под разные источники от плеера.
Страна: (RU)
Форум » Создание сайта на HTML + CSS » Скрипты сайтов HTML » Адаптация видеороликов с Ютуб с помощью Js (Скрипт для плеера, который адаптирует видео с Youtube)
  • Страница 1 из 1
  • 1
Поиск: