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

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

2 комментария
  1. Dimon says:

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

    Ответить
    • driver says:

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

      Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru