Адаптивний відеоплеєр для сайту

53

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

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

ДемоСкачать

Нічого надприродного, все дуже просто, обробка стилів вставлений в запис відеоплеєра відбувається з допомогою невеликого javascript:

( function($) {
$.fn.responsiveVideo = function() {
// додати CSS в секцію head
$( 'head' ).append( '
.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%}
' );
// підключення відео
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( '
' ); } ); }; } )(jQuery);

( function($) {
$.fn.responsiveVideo = function() {
// додати CSS в секцію head
$( ‘head’ ).append(‘
.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%}
‘);// підключення відео
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( ‘

‘);
} );
};
} )(jQuery);

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