유튜브 동영상 삽입 "X-Frame-Options에 의해 표시가 금지되어 문서 표시 거부"

유튜브 동영상 삽입 "X-Frame-Options에 의해 표시가 금지되어 문서 표시 거부"

사용자가 동영상에 대한 링크를 주면 유튜브 동영상을 내 페이지에 삽입하려고 합니다.

<iframe width=\'560\' height=\'315\' src='http://www.youtube.com/watch?v=<video id>&amp;output=embed' frameborder=\'0\' allowfullscreen></iframe>

그러나 이것을 추가하려고 하면 이 오류가 발생합니다.크롬으로 된 페이지를 검사한 후 콘솔 탭에 이 오류가 나타납니다.

"X-Frame-Options에서 표시를 이유로 문서 표시 거부"

저는 영상을 볼 수가 없습니다.IE그리고.Firefox또한.

저는 심지어 추가를 시도했습니다.

 header('X-Frame-Options:Allow-From http://www.youtube.com'); 
 header('X-Frame-Options:GOFORIT);
 &output=embed to the url

다른 게시물에서 특정 솔루션을 읽은 후.

하지만 여전히 같은 오류가 발생합니다.

저는 또한 유튜브가 영상을 보여주기 위해 객체 임베딩 방법을 가지고 있다는 것을 알고 있지만, 이미 유튜브는 그것을 영상 임베딩의 오래된 방법으로 만들었습니다.그래서 나는 새로운 iframe 방법을 사용해서 내 페이지에 동영상을 내장하고 싶습니다.

에 문제가 있습니다.

• 파이어폭스 11
• 크롬 18.0
• IE 8

이 문제에 직면한 사람?

iframe의 출처로 설정하고 있는 페이지(Youtube)/watchpage)를 페이지에 포함하고 싶지 않습니다.그렇게 하도록 강요할 수는 없습니다.

삽입할 올바른 URL은 다음과 같은 형식입니다.

https://www.youtube.com/embed/<video-id>

고객님의 경우

https://www.youtube.com/embed/oHg5SJYRHA0

YouTube에서 비디오 링크를 복사하는 경우:"https://www.youtube.com/watch?v=Fva3fgKmu3o"

• 'watch'를 'embed'로 바꿉니다.

• '?v=' 제거

최종 예:"https://www.youtube.com/embed/Fva3fgKmu3o"

키워드 시계 교체?v=를 내장하고 라이브 URL을 다음과 같이 변경합니다:-

$url_string="https://www.youtube.com/watch?v=H1pTkatn6sI";
$url= str_replace('watch?v=','embed/', $url_string);

그리고 아이프레임에 내장시키고,

<iframe id="player" type="text/html" width="640" height="390" src="{{ $url }}" frameborder="0"></iframe>

누군가 URL을 언급했습니다.embed대신watch.

자바스크립트 답변을 찾으시는 분이 있다면 다음을 이용하여 동적으로 수정할 수 있습니다.string.replace()

예를들면

const updateYoutubeUrl = (youtube_url = 'www.youtube.com/watch?v=H1pTkatn6sI') => {
   youtube_url.replace('watch?v=', 'embed/')
   return youtube_url
}

@dhan 답변을 참조해 주세요.

당신은 복사해야 합니다.embedurl 생성:Share보통이 아닌 구간url.

1. 누름.Share단추:

2. 누름.embed단추:

3. 사용.url내부에iframe(또는 전체를 사용합니다.iframe):

출처 : https://support.google.com/youtube/answer/171780

TL;DR: 쿠키를 삭제해야 할 수도 있습니다.

---

둘 중 하나라도 여전히 작동하지 않는다면/v아니면/embed, 잘못된 형식의 쿠키로 인해 고객에게 문제가 발생할 수 있습니다.대부분 또는 모든 YouTube 페이지에서 400 HTTP ERROR로 인해 이 오류가 발생할 수도 있습니다.

이 문제를 해결하려면 YouTube 쿠키를 삭제해야 합니다.

Chrome에 입력합니다.chrome://settings/siteData주소 표시줄에 입력합니다.youtube에서Search cookies상자.

다음으로, 당신은 유튜브용 쿠키의 두 그룹을 볼 것이고, 당신은 모든 것을 제거할 수 있거나, 작은 화살표를 클릭하면, 당신은 개별 쿠키 이름을 볼 수 있을 것이고, 모든 것과 같은 특정한 것을 삭제할 수 있을 것입니다.gsScrollPos-####.

이 답변의 출처와 자세한 내용은 이 레딧 스레드에서 확인할 수 있습니다.

support.google.com/youtube 의 동영상 또는 재생 목록 내장에서 공식 문서를 확인합니다.

<iframe width="560" height="315"
src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

더 많은 팁과 유튜브에 대한 요령을 확인해보세요.

것이 을 클릭하고 하여 HTML에 .src" "

<div class="example">
 src="<iframe width="853" height="480" src="https://www.youtube.com/embed/jH0Q8NOsIR8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>" </iframe>
</div>

유튜브 링크에서 아이디를 얻으려면 nuxtjs에 도움이 됩니다.

<iframe          
 :src="`https://www.youtube.com/embed/${getIdFromURL(group.videoEmbedLink)}?rel=0`"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
  loading="lazy"
/>

...

methods: {
    getIdFromURL(url) {
      const youtubeRegexp = /https?:\/\/(?:[0-9A-Z-]+\.)?(?:youtu\.be\/|youtube(?:-nocookie)?\.com\S*[^\w\s-])([\w-]{11})(?=[^\w-]|$)(?![?=&+%\w.-]*(?:['"][^<>]*>|<\/a>))[?=&+%\w.-]*/ig
      let id = url.replace(youtubeRegexp, '$1')

      if (id.includes(';')) {
        const pieces = id.split(';')

        if (pieces[1].includes('%')) {
          const uriComponent = decodeURIComponent(pieces[1])
          id = `http://youtube.com${uriComponent}`.replace(youtubeRegexp, '$1')
        } else {
          id = pieces[0]
        }
      } else if (id.includes('#')) {
        id = id.split('#')[0]
      }

      return id
    }
  }

사이트에서 Cross-Origin-Embedder-Policy 헤더를 사용하는 경우 iframe 요소에 'credentialless'를 추가해야 합니다.

<iframe credentialless ... >

https://developer.chrome.com/blog/iframe-credentialless/ 를 참조하십시오.

시계 대신 내장만 추가합니다.

예제:-https://youtube.com/embed/OGGuw2dLBjk

언급URL : https://stackoverflow.com/questions/9934944/embedding-youtube-video-refused-to-display-document-because-display-forbidden-b