Как вставить на сайт адаптивное видео с Youtube, Vkontakte

адаптивное видео с youtube, vkontakte, facebook, twitter, vimeo

Привет всем тем, кто движется в направлении идеального сайта - блога и не только на blogspot - blogger но и других платформ. Сегодня у нас очередная важная тема, немного сложновато было описать ее в заголовке, зато здесь мы разойдемся на полную.

Способ подойдет для любой платформы будь то WordPress, Joomla, Blogger и т.д.. Но показывать буду на примере Blogger.

Итак, время движется, с каждым днем появляются новые технологии и наши шаблоны так же не отстают. Ничего не напоминает вам эта фраза? А должна, не так давно мы писали статью о превосходстве отзывчивого, реагирующего шаблона blogger для некоторых милей звучит английский вариант responsive blogger template. Почитайте сперва ее, а потом возвращайтесь к этой. Итак, если вы уже прочитали ее, тогда вы знаете, что с недавних пор гугл стал относится к сайтам с адаптивным дизайном более лояльно, в общем полюбил их больше, нежели те, которые не имеют такого превосходство. Ведь пользователю всегда должно быть комфортно просматривать ваш контент.

Не исключение тому и видео контент сайта - блога. В основном большинство вебмастеров и блогеров используют на своих веб-проектах такие видео-хостинги и социальные сети, как youtube, vimeo, rutube и вконтакте, facebook, twitter и другие. В общем наша задача состоит в том, чтобы пришедший на наш сайт или блог пользователь на своем мобильном телефоне к примеру с шириной дисплея 320 пикселей мог нормально просмотреть наш видеоролик. Потому что, если у него этого не получится сделать на вашем сайте он вмиг с него уйдет. К примеру зайдите на любую страницу нашего сайта где есть видео и сделайте окно вашего браузера то меньше, то больше и вы увидите, как плеер меняет свои размеры соответствуя размеру вашего браузера. Еще одна интересная вещь, сейчас есть много новых шаблонов, которым задают адаптивный дизайн, но как раз о видео плеерах многие веб-дизайнеры забывают.

Настройка адаптивности для видеоплеера с помощью CSS


Впрочем задача перед нами стоит не сложная, нужно в разделе Тема - Изменить HTML найти строку ]]></b:skin> и перед ней вставить CSS код:

@media screen and (max-width:768px){iframe, object, embed{width:100%;height:320px}}@media screen and (max-width:640px){iframe, object, embed{width:100%!important;height:300px}}@media screen and (max-width:480px){iframe, object, embed{width:100%;height:auto}}@media screen and (max-width:320px){iframe, object, embed{width:100%;height:auto}}

Сохраняем шаблон и проверяем, как изменяется размер видео плеера при изменении размера окна вашего браузера.


Переходим к просмотру видео:



Поделиться в социальных сетях:
Facebook TwitterGoogle+ Vkontakte

Рекомендуем