Видео с YouTube без чёрных рамок

Видео без чёрных рамок? Легко!

YouTube настолько прочно вошёл в нашу жизнь, что сложно представить человека, который бы не смотрел какие-либо видео на этом сервисе.

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

И это ещё не самый плохой вариант. Чёрные рамки могут быть как по бокам, так и сверху и снизу...

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

Как вставить видео без чёрных рамок?

В Сети существует много публикаций с описанием способов решения данной проблемы. Начиная от того, что предлагают обрабатывать видео различными редакторами (Movavi, Sony Vegas Pro и т.д...) и заканчивая некоторыми онлайн-сервисами различной степени сложности.

Порой поражает трудоёмкость процесса для решения такого простого вопроса. Наверное, по этой причине я, до некоторых пор, особо не задавался решением проблемы и выкладывал видео, как есть. Однако, совсем недавно, гендиректор спросил - могу ли я что-то сделать с такими видео на наших корпоративных сайтах? Оказалось, что могу...

Как вставить видео с YouTube без чёрных рамок

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

Вот ссылка на сервис: http://embedresponsively.com/

А вот как этим сервисом пользоваться:

В итоге получаем примерно такой код:

<style>
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed//OrihEH56KC0' frameborder='0' allowfullscreen></iframe>
</div>

Вот этот код и вставляем на сайт там, где должно быть наше видео...

Вот и всё!

Когда это бывает необходимо?

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

Ведь YouTube предлагает IFRAME с определённой высотой и шириной. Например:

<iframe width="560" height="315" src="https:/...</iframe>

Если такой фрейм пытыться подогнать под мобильное устройство, то тогда с компьютера видео будет смотреться убого. Если подгонять под компьютер, то с мобильного чёрные траурные рамки режут взгляд...

Так, что решение, о котором я здесь рассказал, очень даже востребовано... И вот оно в действии: Сайт на OpenCart, пролистайте главную страницу вниз, там два видео. Можете там перейти по кнопке на реальные видео-отзывы наших клиентов - там вообще куча видео на странице...... Или вот вообще без движка - рукописный сайт...

WordPres... посмотрите видео в этой статье...

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

Так, что, если кому это пригодится - пользуйтесь на здоровье...

На заметку...

Когда-то писал о правильной вставке видео... Там речь шла о том, чтобы закрыть возможность перехода с сайта на YouTube... Но что-то стал плагин не так работать в последнее время. У себя я его отключил.

И ещё маленький Лайфхак, как сейчас модно говорить.

Если у вас на странице несколько видео, то не нужно стиль вставлять перед каждым. Достаточно один раз перед первым видео... Вот реальный пример, выдранный с нашего корпоративного сайта:

<style>
.solut {
margin: 30px;
width:300px;
max-width:300px;
min-width:100px;
display:inline-block;
vertical-align:top;
}
.solut img {
vertical-align:top;
}
.solut span {
width:auto;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<div style="width:100%; margin: 0 auto;" wfd-id="42">
	<div class="solut">
		<div class="embed-container" wfd-id="54"><iframe src="https://www.youtube.com/embed/xiLqGRQatxY" frameborder="0" allowfullscreen=""></iframe></div>
	</div>
	<div class="solut">
		<div class="embed-container" wfd-id="52"><iframe src="https://www.youtube.com/embed/cQGA9ebuLRU" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
	<div class="solut">
		<div class="embed-container" wfd-id="50"><iframe src="https://www.youtube.com/embed/PtuC-CsmnQU" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
	<div class="solut" wfd-id="53">
		<div class="embed-container" wfd-id="54"><iframe src="https://www.youtube.com/embed//U2djnViNwD4" frameborder="0" allowfullscreen=""></iframe></div>
	</div>
	<div class="solut" wfd-id="51">
		<div class="embed-container" wfd-id="52"><iframe src="https://www.youtube.com/embed//eg9auIfx4-I" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
	<div class="solut" wfd-id="49">
		<div class="embed-container" wfd-id="50"><iframe src="https://www.youtube.com/embed//2Datq3Htl0s" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
	<div class="solut" wfd-id="47">
		<div class="embed-container" wfd-id="48"><iframe src="https://www.youtube.com/embed//uLADOQzz4Lc" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
	<div class="solut" wfd-id="45">
		<div class="embed-container" wfd-id="46"><iframe src="https://www.youtube.com/embed//fcPuNUhq9mQ" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
	<div class="solut" wfd-id="43">
		<div class="embed-container" wfd-id="44"><iframe src="https://www.youtube.com/embed//Vkqw5IWITyo" frameborder="0" allowfullscreen=""></iframe></div>	
	</div>
</div>

Как видите, здесь, кроме прочего, я ещё порулил блоком, в котором все эти видео отображаются. И кстати, все видео без чёрных рамок...

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

Материалы по теме:

Adware, как удалить с компьютера

Резервное копирование WordPress

Как проверить человека по фотографии

Регулярные выражения в Notepad++

Как закрыть внешние ссылки правильно

Продвижение в социальных сетях