Адаптивные YouTube-ролики на сайте

Адаптивные YouTube-ролики на сайте

В работе контент-менеджера есть один момент, который может нарушить адаптивность работы сайта - это вставки видео. 
При вставке видео с сервиса YouTube, сервис генерирует код iframe-а, который содержит жесткие размеры ширины и высоты. При открытии страницы на экранах, меньших этих размеров, страница будет "плыть".

Поэтому нужно настроить автоматическое изменение параметров iframe под размеры экрана.

Допустим, наши статьи выводятся в контейнере "div" с классом "news-detail". В таком случае, можем воспользоваться следующим JS-кодом:

var $allVideos = $('iframe[src*="youtube.com"]'),
    $fluidEl = $("div.news-detail");
    $(document).ready(function () {
        $allVideos = $('iframe[src*="youtube.com"]');
        $allVideos.each(function() {
            $(this)
                .data('aspectRatio', this.height / this.width)
                .removeAttr('height')
                .removeAttr('width').resize();
        });
    });
$(window).resize(function() {
    var newWidth = $fluidEl.width();
    // Resize all videos according to their own aspect ratio
    $allVideos.each(function() {
        var $el = $(this);
        $el
            .width(newWidth)
            .height(newWidth * $el.data('aspectRatio'));
    });
}).resize();
Количество показов: 14
08.04.2020

Возврат к списку

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение

Работы по сайту

Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.