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

Здравствуйте, уважаемые друзья и гости блога! В этой небольшой статье, я хочу Вам рассказать о том, как сделать адаптивное видео с Ютуба на своем сайте самостоятельно и быстро. Даже если Вы не большой знаток всяких там кодов HTML и CSS, то Вы все равно быстро и без особого труда разберетесь, как создать адаптивное 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%;
}

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

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

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

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