Адаптивный дизайн для видеоплеера сайта - блога.

video-responsive-website-design

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

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

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

Впрочем задача перед нами стоит не сложная, нужно в разделе Шаблон - Изменить HTML найти код ]]></b:skin> и перед ним вставить следующий код:
@media screen and (max-width:768px){
iframe{width:100%;height:auto}}
@media screen and (max-width:640px){
iframe{width:100%;height:250px}}
@media screen and (max-width:480px){
iframe{width:100%;height:auto}}
@media screen and (max-width:320px){
iframe{width:100%;height:auto}}
Сохраняем шаблон и проверяем, как изменяется размер видео плеера при изменении размера окна вашего браузера.


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Адаптивный дизайн для видеоплеера сайта - блога.
4/ 5
Oleh