Домой / Сайтостроение / Адаптивное видео с Ютуба на свой сайт самостоятельно!

Адаптивное видео с Ютуба на свой сайт самостоятельно!

адаптивное видео с ютуба
адаптивное видео с ютуба

Как сделать адаптивное видео с Ютуба на своем сайте? Узнай сейчас и создай сам!

Здравствуйте, уважаемые друзья и гости блога! В этой небольшой статье, я хочу Вам рассказать о том, как сделать адаптивное видео с Ютуба на своем сайте самостоятельно и быстро. Даже если Вы не большой знаток всяких там кодов HTML и CSS, то Вы все равно быстро и без особого труда разберетесь, как создать адаптивное youtube видео на сайте, если он вдруг не поддерживает данную функцию.


Бывают случаи, когда вставляемое видео с Youtube на сайте не адаптируется к мобильным устройствам и при его просмотре на таковых просто напросто обрезается, что не есть хорошо для вашего ресурса. Ведь как Вы знаете сейчас мобильные устройства довольно широко распространены и ими пользуется подавляющее большинство пользователей интернета. И само собой, если ваше видео не будет отображаться на сайте должным образом, то посетитель обязательно уйдет от Вас. Этого нельзя допустить!

И если Вы столкнулись с такой проблемой, и ваш сайт, например лендинг, не адаптирует вставленное видео с Ютуба как это положено, то этот материал именно для Вас!

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

Адаптивная верстка видео всталенного с Ютуба на сайт — Как это сделано?

адаптивное видео
адаптивное видео

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

Этот способ исправления адаптивности видео подойдет любому пользователю, так как он прост в использовании и совершенно бесплатен! Данный лайфхак, назовем его так, будет выглядеть вот таким образом ...

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

адаптивное youtube видео
адаптивное youtube видео

А в этой статье, Вы сможете прочесть и узнать самый лучший способ продвинуть и раскрутить канал на Ютуб быстро и дешево!

Теперь дальше по теме, а то что-то я отклонился от нее ...

Скопированный код видео с Ютуба Вам нужно обернуть в div с классом videoWrapper и это будет выглядеть примерно вот так:

<div class="videoWrapper">;
<iframe width="560" height="315" src="https://www.youtube.com/embed/cHsgHEB_8u8" frameborder="0" allowfullscreen></iframe>
</div>

Далее необходимо добавить стили CSS в свой файл стилей style.css, ищите его в вашей активной теме оформления сайта. Вот эти стили:

.videoWrapper{
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}
.videoWrapper iframe,.videoWrapper object, .videoWrapper embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

Вот и все, что требовалось сделать, чтобы видео с ютуба стало адаптивным!

Да, вот посмотрите классное адаптивное видео с Ютуба, которое Вас не оставит равнодушным, так как эта музыка просто завораживает:

Думаю, что оно Вам должно понравиться? Не так ли?!

На этом все на сегодня. Всем удачи и благополучия! До новых встреч!



Про Валерий Бородин

Проверьте также

всплывающая подсказка при наведении

Всплывающая подсказка при наведении — Плагин или скрипт?

Как делается всплывающая подсказка при наведении на сайте? Узнай сейчас! Здравствуйте, уважаемые друзья и гости …

  • https://plus.google.com/+БлогАлександраГаврина Блог Александра Гаврина

    Валерий, вопрос? А в какое именно МЕСТО вставить этот «добавить стили CSS в свой файл стилей style.css» нашел я этот файл и что дальше , куда в какое место вставить????

    • https://pribylwm.ru pribylwm

      Вставляйте в самый конец кода.

  • https://plus.google.com/+БлогАлександраГаврина Блог Александра Гаврина

    И еще вопрос? Вставив этот «файл стилей style.css» что будет с теми видео которые уже добавлены?? Мне придется все видео переделывать???

    • https://pribylwm.ru pribylwm

      Нет, все видео переделывать не нужно, но если есть такое желание или необходимость, то можно и переделать.

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу