Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Адаптивный видеоплеер для сайта

Представляю вашему вниманию, легкий плагин для вставки видео на страницы сайтов с адаптивным дизайном. В последнее время все острее встает вопрос поиска решений для адаптивной верстки различных элементов управления веб-сайтов. Очень часто вставленное в запись видео с какого-нибудь стороннего ресурса (Yotube, Vimeo и т.д.), при просмотре на экранах разных размеров, а у пользователей сейчас этого добра — завались, ломает весь макет страницы. Для того чтобы избежать таких косяков, разработчики сайтов используют разные методы, применяют общепринятые правила адаптивной верстки или ищут новые решения.
Работая над очередным проектом, выполняя пожелания заказчика(кто платит тот и музон заказывает), задался целью облегчить процесс обработки мультимедийного контента вставляемого непосредственно в записи блога или сайта. В своих изысканиях, натолкнулся на интересные наработки Bavotasan, в которых автор попытался использовать всю мощь jQuery и CSS вместе. Из всего этого и получился этот замечательный плагин, с помощью которого очень легко интегрировать на страницы сайтов с адаптивным дизайном, любой с различных видеохостингов.
 
Адаптивный видеоплеер
 

 
Ничего сверхъестественного, все очень просто, обработка стилей для вставляемого в запись видеоплеера происходит с помощью небольшого :
 

( function($) {
        $.fn.responsiveVideo = function() {
                // добавить CSS в секцию head
                $( 'head' ).append( '<style type="text/css">
                        .responsive-video-wrapper{width:100%;position:relative;padding:0}
                        .responsive-video-wrapper iframe,.responsive-video-wrapper object,
                        .responsive-video-wrapper embed{position:absolute;top:0;left:0;width:100%;height:100%}
                </style>' );
 
                // подключение видео
                var el = $(this),
                        all_videos = el.find( 'iframe[src*="player.vimeo.com"], 
                                iframe[src*="youtube.com"], 
                                iframe[src*="dailymotion.com"],
                                iframe[src*="kickstarter.com"][src*="video.html"],
                                object, embed' );
 
                // добавить div с соответствующим соотношением сторон
                all_videos.each( function() {
                        var video = $(this)
                                aspect_ratio = video.attr( 'height' ) / video.attr( 'width' );
 
                        video
                                .removeAttr( 'height' )
                                .removeAttr( 'width' );
 
                        if ( ! video.is( 'embed' ) )
                                video.wrap( '<div class="responsive-video-wrapper" style="padding-top: ' + ( aspect_ratio * 100 ) + '%" />' );
                } );
        };
} )(jQuery);

 
Одно ограничение в использовании этого плагина все же есть. Старый код embed для вставки видео с Yotube не будет работать на IOS устройствах, так как они на базе Flash, ну, а для этого и существуют новые коды через iframe.
Так что думаю, этот интересный опыт пригодится многим. Скачивайте плагин по прямой ссылке, используйте его в своих проектах и, если у вас появятся предложения по улучшению кода, или обнаружатся какие-то ошибки, пишите в комментариях. Вместе все у нас получится!

Всего комментариев: 2

  • Dimon: 14 марта, 2016 в 22:16

    Сейчас под адаптацию под поисковые системы, эта статья актуальна.

    Ответить
    • driver: 14 марта, 2016 в 23:18

      Еще проще на чистом CSS: см.пример Конечно, если быть точным в терминологии, в этом решении, вёрстка больше резиновая или отзывчивая, нежели адаптивная

      Ответить

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

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>