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

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

 

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

( 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.
Так что думаю, этот интересный опыт пригодится многим. Скачивайте плагин по прямой ссылке, используйте его в своих проектах и, если у вас появятся предложения по улучшению кода, или обнаружатся какие-то ошибки, пишите в комментариях. Вместе все у нас получится!