Удаление черных границ 4: 3 на миниатюрах youtube

Ответ 1

Используйте его как фоновое изображение, центрируйте его и измените высоту.

http://dabblet.com/gist/4012604

.youtubePreview {
    background:url('http://img.youtube.com/vi/aOPGepdbfpo/0.jpg') center no-repeat;
    height:204px;
    width:480px;
}

Ответ 2

YouTube предлагает изображения, которые не имеют черных полос 4: 3. Чтобы получить миниатюру видеоизображения 16: 9 без черных полосок, попробуйте один из них:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

Первый mqdefault появляется как изображение размером 320x180 пикселей.

Второй maxresdefault - это изображение размером 1500x900 пикселей, поэтому для его использования в качестве миниатюры потребуется изменить размер. Это приятное изображение, но оно не всегда доступно. Если видео имеет низкое качество (менее 720p, я бы себе, не совсем уверен), то это "maxresdefault" становится недоступным. Поэтому никогда не полагайтесь на это.

Ответ 3

Если вы хотите его с гибкой шириной, используйте это:

HTML

<div class="thumb">
    <img src="...">
</div>

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}

Ответ 4

Чтобы удалить black borders из Youtube thumbnail, нам не нужно писать a seperate code или CSS. Просто используйте сайт ytimg.com, который обозначает YouTube image, который fetches содержит изображения из YouTube, такие как thumbnails и icons по мере необходимости, которые поступают из этого домена.

Пример, показанный ниже -

Оригинальное изображение [С границами]

http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg

Без границ/полос

• http://img.youtube.com/vi/JQ7a_8psCn0/mqdefault.jpg

ИЛИ

2. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg

Ответ 5

Как вы это делаете. Там много параметра в url изображения.

https://i.ytimg.com/vi/XkOpbLBzPsY/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo

Ответ 6

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

После поиска в сети некоторое время для исправления этой проблемы я ничего не придумал, я думаю, что пробовал все, и ничто не решило мою проблему. Затем, управляемый моей логикой, я просто завернул iframe встроенного видео youtube в одном div set overflow: hidden; к этому div и сделал его высотой 2px меньше, чем высота 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 2px меньшей по высоте, чтобы скрыть границу, в вашем сценарии, если граница находится в верхней части видео или по бокам и/или с разными размеры, вы должны сделать разные размеры для div-оболочки и позиционировать его так, чтобы он перекрывал видео, где находятся границы и с переполнением: скрыто; границы скрыты.

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