유튜브 미리 보기에서 검은색 테두리 4:3 제거

유튜브 미리 보기에서 검은색 테두리 4:3 제거

예: 링크가 있습니다.

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

Youtube 비디오 썸네일:

그리고 검은색 상단과 하단 테두리를 제거하여 다음과 같은 사진을 얻고 싶습니다.

PHP 함수 javascript/jQuery 또는 유튜브 API 자체를 사용하여 수행할 수 있습니까?

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 픽셀 이미지입니다.

는 번째두.maxresdefault1500x900 픽셀 이미지로 제공되므로 축소 이미지로 사용하려면 크기를 조정해야 합니다.이것은 좋은 이미지이지만 항상 사용할 수 있는 것은 아닙니다.비디오의 화질이 낮은 경우(정확히는 모르지만 720p 미만) 이 'maxresdefault'는 사용할 수 없게 됩니다.그러니 절대로 의지하지 마세요.

배경 이미지로 사용하여 중심을 잡고 높이를 변경합니다.

http://dabblet.com/gist/4012604

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

유연한 너비를 사용하려면 다음을 사용합니다.

HTML

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

CSS

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

을 black bordersYoutube thumbnail▁a다▁have를 쓸 필요가 없습니다.seperate code또는CSS사용하기만 하면 됩니다.ytimg.com사트이약, 입니다자의▁for를 나타냅니다.YouTube image 그렇고요.fetches에서 ▁from의 YouTube,맘에 들다thumbnails그리고.icons필요에 따라 해당 도메인에서 제공됩니다.

아래 예시 -

원본 이미지 [경계 포함]

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

테두리/스트립 없음

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

OR

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

이것은 제가 비슷한 질문에 대해 제시한 답변이지만, 그것은 당신의 문제를 완전히 해결할 것입니다, 단지 래퍼 디브가 있는 비디오에서 보여주고 싶지 않은 모든 것을 잘라내면 됩니다, 이것은 html과 css로 이루어집니다.

이 문제를 해결하기 위해 잠시 인터넷을 검색한 결과 아무것도 발견되지 않았습니다. 저는 모든 것을 시도했고 문제를 해결한 것은 아무것도 없다고 생각합니다.그런 다음 나의 논리에 따라 나는 내장된 유튜브 비디오의 iframe을 하나의 div 세트 오버플로로 감쌌습니다. 이 div에 대해 iframe 높이보다 2px 더 작은 높이로 만들었습니다(내 비디오에서는 하단에 검은색 테두리가 있었습니다).따라서 래퍼 디브는 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>

저의 경우 테두리가 약 2px 높이였기 때문에 테두리를 숨기기 위해 래퍼 div를 2px 높이로 작게 만들었습니다. 당신의 시나리오에서 테두리가 비디오의 상단에 있거나 측면에 있거나 다른 치수를 가지고 있다면,당신은 래퍼 div에 대해 다른 차원을 만들고 경계가 있는 비디오와 오버플로가 있는 비디오와 겹치도록 잘 배치해야 합니다. 경계가 숨겨져 있습니다.

이것이 도움이 되기를 바랍니다.

유튜브가 어떻게 하는지.이미지 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

저는 전문가가 아닙니다. 유튜브 동영상 썸네일의 검은 막대를 제거할 수 있는 해결책을 찾고 있었습니다. 몇 가지 해결책을 찾았지만 저에게는 효과가 없었습니다.제가 찾은 해결책들을 실험하기 시작했고 이것을 생각해냈습니다.

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>

응답성이 뛰어난 방법이 필요했기 때문에 이 코드가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;
}

참고로, 이미지에 대해 계산된 높이로 폴백할 수도 있습니다(이미지가 완전히 로드되지 않은 경우).

img.style.top = `${-((img.offsetHeight || (3 / 4 * img.offsetWidth)) - (img.offsetWidth * 9 / 16)) / 2}px`;

언급URL : https://stackoverflow.com/questions/13220715/removing-black-borders-43-on-youtube-thumbnails