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

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}}
Сохраняем шаблон и проверяем, как изменяется размер видео плеера при изменении размера окна вашего браузера.


Коммент.

Имя

Бесплатные шаблоны WordPress Блог Все для blogger Все для WordPress Графический дизайн Заказ сайта Заработок в интернете Инструменты для сайта Контакты Купить шаблон blogger Наши услуги Новичкам Оптимизация сайта Партнерки для сайтов Перевод статьи Плагины для WordPress Полезные сайты Полезные сервисы Полезные статьи Разделы сайта Сайты - блоги Шаблоны для Blogger Шаблоны для Joomla Шаблоны для PrestaShop Шаблоны для Ucoz Шаблоны на русском Шаблоны blogger 2016 Шаблоны blogger бесплатно Шаблоны blogger магазин Шаблоны Bootstrap 3 Шаблоны Magento best blogger templates
false
ltr
item
Шаблоны для сайтов и блогов: Адаптивный дизайн для видеоплеера сайта - блога.
Адаптивный дизайн для видеоплеера сайта - блога.
Blogspot, как на сайте - блоге сделать реагирующий на мобильные устройства дизайн для видеоплеера. Responsive design for video player.
https://3.bp.blogspot.com/-LFcboYMZD2s/VgVd8KTZJvI/AAAAAAAAhoc/YRcpOnJgDwU/s400/video-responsive-website-design-%25D1%2580%25D0%25B5%25D0%25B0%25D0%25B3%25D0%25B8%25D1%2580%25D1%2583%25D1%258E%25D1%2589%25D0%25B8%25D0%25B9-%25D0%25B4%25D0%25B8%25D0%25B7%25D0%25B0%25D0%25B9%25D0%25BD-%25D0%25B4%25D0%25BB%25D1%258F-%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B5%25D0%25BE%25D0%25BF%25D0%25BB%25D0%25B5%25D0%25B5%25D1%2580%25D0%25B0.jpg
https://3.bp.blogspot.com/-LFcboYMZD2s/VgVd8KTZJvI/AAAAAAAAhoc/YRcpOnJgDwU/s72-c/video-responsive-website-design-%25D1%2580%25D0%25B5%25D0%25B0%25D0%25B3%25D0%25B8%25D1%2580%25D1%2583%25D1%258E%25D1%2589%25D0%25B8%25D0%25B9-%25D0%25B4%25D0%25B8%25D0%25B7%25D0%25B0%25D0%25B9%25D0%25BD-%25D0%25B4%25D0%25BB%25D1%258F-%25D0%25B2%25D0%25B8%25D0%25B4%25D0%25B5%25D0%25BE%25D0%25BF%25D0%25BB%25D0%25B5%25D0%25B5%25D1%2580%25D0%25B0.jpg
Шаблоны для сайтов и блогов
http://www.shablonu-dlya-blogger.ru/2015/09/Otzyvchivyj-dizajn-dlja-videopleera-sajta-bloga.html
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/
http://www.shablonu-dlya-blogger.ru/2015/09/Otzyvchivyj-dizajn-dlja-videopleera-sajta-bloga.html
true
5286106991494805428
UTF-8
Похожих постов не найдено Отобразить все Читать дальше Ответить Отмена Удалить By Главная Страницы Пост. Отобразить все Рекомендуем Тег Архив Поиск Все посты По вашему запросу не найдено ни одного поста Вернуться на главную Воскресение Понедельник Вторник Среда Четверг Пятница Суббота Вс Пн Вт Ср Чт Пт Сб Января Февраль Март Аперль Май Июнь Июль Август Сентябрь Октябрь Ноябрь Декабрь Янв Фев Мар Апр Май Июнь Июль Авг Сен Окт Ноя Дек только что минуту назад $$1$$ мин. назад час назад $$1$$ час. назад Вчера $$1$$ дней тому назад $$1$$ недель тому назад более 5 недель Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy