Удаление черных границ 4:3 на миниатюрах YouTube
Например, у меня есть ссылка
http://img.youtube.com/vi/aOPGepdbfpo/0.jpg
для эскиза видео на YouTube:
И я хотел бы убрать черную верхнюю и нижнюю границу, чтобы получить такую картинку:
Может ли это быть сделано с помощью PHP-функции javascript/jQuery или, возможно, самого youtube api?
8 ответов
Используйте его как фоновое изображение, отцентрируйте его и измените высоту.
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 нам не нужно писать seperate code или же CSS, Просто используйте ytimg.com сайт, который обозначает YouTube image, который fetches изображения из YouTube, лайк thumbnails а также icons как требуется, которые приходят из этого домена.
Пример показан ниже -
Исходное изображение [С полями]
http://img.youtube.com/vi/JQ7a_8psCn0/hqdefault.jpg
Без границ / полос
ИЛИ ЖЕ
Как YouTube сделать это. В 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
Мне нужен был отзывчивый способ сделать это, поэтому давайте рассмотрим, что этот код работает на
window.addEventListener("resize");
Мы в основном хотим преобразовать соотношение 4: 3 в 16: 9.
<div id="video-item">
<img src="https://i.ytimg.com/vi/{videoId}/hqdefault.jpg" />
</div>
const videoItem = document.getElementById("video-item");
const img = videoItem.querySelector("img");
resize()
{
img.style.top = `${-(img.offsetHeight - (img.offsetWidth * 9 / 16)) / 2}px`;
videoItem.style.height = `${9 / 16 * videoItem.offsetWidth}px`;
}
#video-item
{
position: relative;
overflow: hidden;
}
#video-item img
{
width: 100%;
position: absolute;
}
Я не эксперт, я искал решение для удаления черных полос миниатюр видео на YouTube, нашел несколько решений, но у меня не получилось. Начал экспериментировать с найденными решениями и придумал это.
https://jsfiddle.net/1fL2ubwy/
.row, .col, [class*="col-"] {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.yt-thumb {
width: 100%;
height: 74%;
overflow: hidden;
}
.yt-thumb > img {
margin: -10% 0;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
<a class="yt-thumb" href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
<img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
</a>
</div>
<div class="col-md-6 col-sm-6 col-6 card vd-block mb-3">
<a href="https://www.youtube.com/embed/wb49-oV0F78" data-rel="lightcase">
<img class="aligncenter" src="https://img.youtube.com/vi/wb49-oV0F78/hqdefault.jpg" alt="thumbnail" width="100%" height="auto">
</a>
</div>
</div>
</div>Это ответ, который я дал на аналогичный вопрос, но он полностью решит вашу проблему, просто обрежьте все, что вы не хотите показывать из видео, с помощью div-оболочки, это делается с помощью html и css.
После поиска в сети некоторое время для решения этой проблемы я ничего не придумала, я думаю, что все перепробовала, и ничто не решило мою проблему. Затем, руководствуясь моей логикой, я просто обернул 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?&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 на 2 пикселя в высоту, чтобы скрыть границу. В вашем сценарии, если граница находится сверху видео или по бокам и / или с разными размерами, вы Нужно сделать разные размеры для div-оболочки и расположить его так, чтобы оно перекрывало видео там, где есть границы, и с переполнением: hidden; границы скрыты.
Надеюсь, это поможет.