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

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

http://dabblet.com/gist/4012604

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

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 – это изображение размером 320×180 пикселей.

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

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

HTML

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

CSS

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

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

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

Исходное изображение [С границами]

http://img.ruphp.com/php/hqdefault.jpg

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

1. http://img.ruphp.com/php/mqdefault.jpg

ИЛИ

2. http://img.ruphp.com/php/mqdefault.jpg

Как вы это делаете. В URL-адресе есть много параметров.

 http://img.ruphp.com/php/hqdefault.jpg?custom=true&w=196&h=110&stc=true&jpg444=true&jpgq=90&sp=68&sigh=Gv-oyTIgA39e7UG01pZ2RiGbwSo 

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

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

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