Как вставить Ютуб видео на сайт
Вставить видеоролик с Ютуба на сайт, очень просто: нажал на кнопку поделиться, и там все понятно. Но разговор не об этом. До поры, до времени, меня все устраивало, пока не решил сделать новый дизайн очередного сайта и при встраивании видео эти черные полоски вокруг моего кино — начали мозолить глаза.
Много говорить и попусту лить воду, я не буду. Потому что это статья в основном написана для самого себя, чтобы не забыть и сразу найти решение. Видео с сервиса YouTube вставленное таким способом имеет адаптивный размер, подгоняет все под размер окна, не надо ни скриптов, ни глубоких познаний в программировании. И самое главное — нет этих черных полос вокруг видеоролика.
Адаптивное видео с Ютуба без черных полос
Сначала создаем <div> с любым классом, у меня это будет:
<div class="vidcontainer">
***
</div>
Далее помещаем в середину этого контейнера чуть переделанный код, который вам дал Ютуб и присваиваем тегу <iframe> любой класс, у меня это будет «vidY» Размеры фрейма указывать не надо — верстка будет адаптивная.
Теперь у вас должно получится так:
<div class="vidcontainer"> <iframe src="Ваша ссылка на видео" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="vidY"></iframe></div>
Этот код вставляете на ваш сайт в режиме «HTML» где хотите разместить видео.Чтобы все отображалось как положено, этого кода мало. Нам надо добавить еще .css стиль для этого "кино". Если вы не знаете куда это добавлять, то можете просто, в том же режиме «HTML» вверху нашего контейнера с видео добавить два тега <style>***</style> и между ними вставить нижний код стилей. Все кто в теме, те вставляют стиль куда надо, а именно, в каскадную таблицу стилей css.
.vidcontainer {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.vidY {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Вот и все! Вставленное с Ютуба видео на сайте, теперь на всю ширину страницы, его масштаб пропорциональный размеру экрана. Нет черных полос, ни сверху, ни снизу, и по бокам тоже их нет. Вот как это выглядит у меня. Можете применить разный масштаб к этому видео чтобы убедиться в результате.
Как вставить вместо видео — плейлист
Если вы захотите вместо видео вставить с Ютуба целый плейлист, то я вам подскажу, и как это сделать. Вы все делаете как написано выше, но в адресе видео после embed⁄ вы после слеша должны вставить волшебное слово videoseries?list= После него добавьте идентификатор своего плейлиста. Должно получиться, как в нижнем коде:
<div class="vidcontainer">
<iframe src="https://www.youtube.com/embed/videoseries?list=PLcdU_W4f_hRtZZY3pEyB0Jkd00dhPO3lz" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="vidY">
</iframe>
</div>
Когда вы вставили этот код, в углу экрана вашего видео покажется меню с видео и его количество.Как вы можете видеть на верхней вставке из YouTube. Теперь добавляя видео на ваш канал, оно автоматически будет показываться на вашем сайте, в этом плейлисте видеороликов. Надеюсь проблем теперь, как правильно вставить видео на сайт у вас не будет.
