например. У меня есть ссылка
http://img.youtube.com/vi/aOPGepdbfpo/0.jpg
для миниатюры видеоролика youtube:
И я хотел бы удалить черную верхнюю и нижнюю границу, чтобы получить следующее изображение:
Может ли это быть сделано с помощью функции PHP javascript/jQuery или, может быть, самого youtube api?
Используйте его как фоновое изображение, центрируйте его и измените высоту.
http://dabblet.com/gist/4012604
.youtubePreview {
background:url('http://img.youtube.com/vi/aOPGepdbfpo/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 появляется как изображение размером 320x180 пикселей.
Второй maxresdefault - это изображение размером 1500x900 пикселей, поэтому для его использования в качестве миниатюры потребуется изменить размер. Это приятное изображение, но оно не всегда доступно. Если видео имеет низкое качество (менее 720p, я бы себе, не совсем уверен), то это "maxresdefault" становится недоступным. Поэтому никогда не полагайтесь на это.
Если вы хотите его с гибкой шириной, используйте это:
HTML
<div class="thumb">
<img src="...">
</div>
CSS
.thumb {
overflow: hidden;
}
.thumb img {
margin: -10% 0;
width: 100%;
}
Чтобы удалить 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
Без границ/полос
ИЛИ
Как вы это делаете. Там много параметра в 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
Это ответ, который я дал по аналогичному вопросу, но он полностью решает вашу проблему, просто вырезает все, что вы не хотите показывать из видео с помощью обертки 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?&autoplay=0&rel=0&fs=0&showinfo=0&controls=0&hd=1&wmode=transparent&version=2;yt:quality=high;" frameborder="0" allowfullscreen></iframe>
</div>
В моем случае граница была с высотой около 2 пикселей, поэтому я сделал оболочку div 2px меньшей по высоте, чтобы скрыть границу, в вашем сценарии, если граница находится в верхней части видео или по бокам и/или с разными размеры, вы должны сделать разные размеры для div-оболочки и позиционировать его так, чтобы он перекрывал видео, где находятся границы и с переполнением: скрыто; границы скрыты.
Надеюсь, это поможет.