SEO блог Михаила Шакина

  • Контакты
    • Реклама на блоге
    • Мои интервью
    • Мои доклады
  • Мои книги
    • Мои приключения в Америке
    • SEO Коллайдер
    • SEO разведка
    • SEO Винчестер
  • Услуги
    • Продвижение сайтов
    • Консультации по продвижению сайтов
    • Консультации по продвижению англоязычных сайтов
  • Лучшее
    • Продвижение сайтов
    • Приключения
    • Видеоуроки
    • WordPress
    • Блоггинг
    • Привлечение посетителей с социальных сетей
    • Саморазвитие и работа в интернете
    • Вебмастеру
  • Мой хостер

Как вставлять видео с YouTube адаптивными

07.07.2017

Дорогие друзья, хочу поделиться с вами одним полезным моментом.

Как вставлять видео с YouTube адаптивными

Видео с Youtube очень полезно размещать на сайте. Это контент, который можно и нужно использовать в дополнение к вашим текстам.

Кроме этого, просматривая видео, посетители проводят больше времени на страницах вашего сайта, что положительно сказывается на поведенческих факторах и позициях. Можете почитать мой SEO эксперимент: как видео повышает позиции.

Но есть одна проблема. При вставке видео с Youtube у многих сайтов из-за особенностей верстки видеоролики не получаются адаптивными. То есть не меняют свои размеры автоматически, подстраиваясь под размер экрана пользователя.

Бывает, что дефолтный код вставки видео нормально отображается. Но бывает, что и нет.

Покажу на примере. Если вставить ролик с YouTube на мой блог, используя предложенный сервисом код, то видео на мобильных устройствах будет выглядеть вот так:

вставить ролик с YouTube

Вроде и по размеру экрана, но на деле выглядит далеко не лучшим образом. Плюс, когда включаешь видео, то вверху и внизу получаются черные участки:

вверху и внизу получаются черные участки

🔥 Кстати! 13 февраля 2023 года стартует 20 поток моего курса по продвижению англоязычных сайтов SEO Шаолинь. Для читателей блога я делаю хорошую скидку. Тариф Про по промокоду "adman" стоит не 30, а 25 тысяч рублей. Тариф Лайт не 12, а 10 тысяч. Тариф Команда не 45, а 37 тысяч рублей. Для получения скидки пишите мне на globatorseo@gmail.com с темой "Курс" или в Telegram @mikeshakin.

Одним словом, мне такая адаптивность не нравилась 🙂 . Ведь на сайте все должно быть красиво!

Я перепробовал разные решения, и в итоге остановил свой выбор на следующем.

Этот способ простой, бесплатный и подходит для сайтов на любых движках.

Читайте также:  14 лет блогу shakin.ru. Видео с поздравлениями

В результате использования этого решения видеоролик выглядит так:

видеоролик выглядит так

Видео получается полностью адаптивным и красиво смотрится на мобильных устройствах.

Я нашел в интернете статью доброго человека Ника Вогта How To Make a Responsive 100% Width YouTube iFrame Embed. Именно предложенный им код мне понравился больше всего. Другие решения либо не работали, либо код был громоздким.

На всякий случай приведу код Ника, если его блог перестанет работать в будущем.

Стандартный код вставки видео с YouTube сейчас выглядит так:

<iframe src="https://www.youtube.com/embed/LlGm2DIJ6MA" width="800" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Все, что нужно сделать, это окружить код YouTube слоем, и добавить класс в код видео:

<div class="container">
<iframe src="https://www.youtube.com/embed/LlGm2DIJ6MA" frameborder="0" allowfullscreen="allowfullscreen" class="video"></iframe>
</div>

Размеры видео можно убрать.

Для наглядности приведу картинку, на которой я зеленым выделил те моменты, которые нужно добавить к стандартному коду для вставки видеороликов с YouTube:

Далее в файл стилей style.css добавляем такой код:

.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Как вариант, можно class="video" в коде ролика не прописывать, а вместо этого добавить в CSS такой код:

.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.container iframe, .container object, .container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Но этот вариант на моем блоге не работает должным образом.

Одним словом, нужно найти такое решение, которое подойдет вашему сайту. Я такое нашел, и поделился им в этой статье. Возможно, многим моим читателям данный способ тоже подойдет.

Можете посмотреть другие мои материалы:

Как повысить кликабельность сайта - Headline Optimizer

Кулак богомола – моя схема продвижения сайтов. Часть 1

3 типа ссылок, которые дают максимальный SEO эффект

Желаю вам плодотворного рабочего дня!

Читайте также:  SEO для сайтов фотографов

Михаил Шакин

Десерт на сегодня - видео про один день из жизни на Бали. Я вот только не увидел, где и когда работает главный герой 🙂 . Может, ему уже и не надо работать 😉 :

Подпишитесь на рассылку блога с полезными материалами по SEO



Оцените, пожалуйста, статью, я старался :) :

(Всего оценок: 18, средняя 4,89 из 5)
Загрузка...

Читайте также:

  • 12 лет блогу shakin.ru. Видео с поздравлениями
  • Итоги 2018 года и планы на 2019
  • 13 лет блогу shakin.ru. Видео с поздравлениями
  • 12 советов по регистрации домена
  • 14 лет блогу shakin.ru. Видео с поздравлениями

Категория: Интересное Теги: вебмастеру, интересное

Меня зовут Михаил Шакин, я автор этого блога, занимаюсь SEO с 2006 года. Вы можете заказать у меня консультации по продвижению вашего сайта в рунете или англоязычном интернете. Мои контакты.

Shakin.ru в соцсетях

Мои каналы и чат в Telegram

Категории

Продвижение сайтов
Приключения
Видеоуроки
SEO ответы
Wordpress
Интервью
Блог-шоу

Полезное

Что я использую в работе

Моя книга про Америку

Книга Михаила Шакина про приключения в Америке

В случае перепечатки материалов обязательно мое письменное разрешение и прямая индексируемая ссылка на Shakin.ru
© 2007-2022 Shakin.ru
Политика конфиденциальности
Пользовательское соглашение