Исправление черных боковых панелей YouTube в iframe 853 на 480 - PullRequest
Новая
       41

Исправление черных боковых панелей YouTube в iframe 853 на 480

2 голосов
/ 31 января 2012

При встраивании HD-видео с YouTube с использованием сгенерированного iframe я замечаю, что при использовании предустановки в проигрыватель добавляются две черные боковые панели. 

<iframe width="853" height="480" src="http://www.youtube...

Для примера в;http://www.villagedurable.org/tv если я вставлю iframe с размерами 640 * 360 или использую HD-размер 1280x720, две боковые панели исчезают, позволяя получить красивое расположение.

Это правда, что и 640 * 360, и 1280x720 используют соотношение сторон:1.777777777777778, умножение 480 на 1.777777777777778 дает 853.3333333333333, что, я думаю, заставляет youtube добавить эти неприятные черные полосы: (*

Ответы [ 2 ]

4 голосов
/ 02 марта 2012

После большой суеты я наконец нашел решение.

Очевидно, что 853x480 не совсем то же, что и 16/9, у игрока нет элементов управления, которые автоматически исчезают. Таким образом, элементы управления видео будут занимать 30 пикселей в ширину, а высота всего 450 пикселей. Чтобы сохранить соотношение сторон, видео сокращается и, следовательно, черные границы (или черные боковые панели, как вы их называете).

Решение состоит в том, чтобы использовать 853x510 в качестве размеров в вашем фрейме: 

<iframe width="853" height="510" ... />

ИМХО, это ошибка на стороне YouTube, так как они предлагают 853x480 в качестве предустановленного разрешения при выборе "встраивать код".

С http://www.h3xed.com/web-and-internet/embedding-youtube-videos-in-hd:

Из четырех вариантов разрешения YouTube отображает вас в диалоговом окне вставки (для видео 16 x 9), 853 x 480 - единственный, который не загружается в игрок с исчезающими элементами управления. Это потому что 16 х 9 делает не идти в 853 х 480 равномерно. Итак, вы заметите, что будет черные полосы по бокам видео 16 х 9. На самом деле играть 853 х 480 видео во встроенном плеере YouTube, вы хотите выбрать 853 x 510 как ширина и высота в коде вставки .

0 голосов
/ 04 октября 2013

После поиска в сети некоторое время, чтобы решить эту проблему, я ничего не придумал, я думаю, что все перепробовал, и ничто не решило мою проблему. Затем, руководствуясь моей логикой, я просто обернул iframe встроенного видео на YouTube в одно переполнение набора div: hidden; к этому div и сделал его высоту на 2 пикселя меньше, чем высота iframe (на моем видео была черная рамка внизу). Таким образом, div-обертка меньше, чем iframe, и, поместив его поверх видео, вы можете скрыть черные границы, которые вам не нужны. Я думаю, что это лучшее решение из всего, что я пробовал до сих пор.

Из приведенного ниже примера попробуйте встраивать только iframe, и вы увидите маленькую черную рамку внизу, а когда вы оборачиваете iframe в div, граница исчезает, потому что div перекрывает iframe и он меньше видео и он переполнен: скрыт, поэтому все, что выходит из измерений div, скрыто. 

<div id="video_cont" style="width: 560px;
                            height: 313px;
                            overflow: hidden;">


    <iframe id="the-video" class="extplayer" width="560" height="315" src="https://www.youtube.com/embed/EErx017kDHQ?&amp;autoplay=0&amp;rel=0&amp;fs=0&amp;showinfo=0&amp;controls=0&amp;hd=1&amp;wmode=transparent&amp;version=2;yt:quality=high;"   frameborder="0" allowfullscreen></iframe>

</div>

В моем случае граница была примерно в 2 пикселя высотой, поэтому я сделал обертку div в 2 раза меньше по высоте, чтобы скрыть границу, в вашем сценарии, если граница находится сверху видео или по бокам и / или с другим размеры, вы должны сделать разные размеры для обёртки div и расположить его так, чтобы он перекрывал видео там, где есть границы и с переполнением: hidden; границы скрыты.

Надеюсь, это поможет.

...