it-swarm.com.ru

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

Например. У меня есть ссылка

http://img.youtube.com/vi/aOPGepdbfpo/0.jpg

для эскиза видео на YouTube:

enter image description here

И я хотел бы убрать черную верхнюю и нижнюю границу, чтобы получить такую ​​картинку:

enter image description here

Можно ли это сделать с помощью функции PHP javascript/jQuery или, возможно, самого youtube api?

41
Derfder

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

http://dabblet.com/Gist/4012604

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

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» становится недоступным. Поэтому никогда не полагайтесь на это.

88
TheCarver

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

HTML

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

CSS

.thumb {
    overflow: hidden;
}
.thumb img {
    margin: -10% 0;
    width: 100%;
}
11
Sergi Ramón

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

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

Исходное изображение [С полями]

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

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

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

OR

  1. http://i.ytimg.com/vi/JQ7a_8psCn0/mqdefault.jpg
7
PB-BitWiser

Как 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
1
Gino

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

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

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

0
dekiss

Я не эксперт, я искал решение для удаления черных полос миниатюр видео на 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>

0
Sampath Kumar