www.youtube.com에서 연결을 거부했습니다. HTML에 유튜브 영상 넣기, 영상 자동재생, 비디오 영상 넣기

HTML에 유튜브 영상 넣기

유튜브 영상을 넣으려면 퍼가기 코드로 넣어야 한다. 그렇지 않으면 유튭에서 연결을 거부했다는 문구가 뜰것이다..
넣고싶은 유튜브 영상에서 공유 버튼을 누른다

 

퍼가기를 누른다.

 

iframe 부분 코드를 가져와 넣어준다

 

나는 스타일로 width와 height를 줬기때문에 뺐다.
그리고 allow="autoplay"가 먹지 않아서, src 뒷부분에 ?autoplay=1을 붙여주었다.

<iframe
    src="https://www.youtube.com/embed/G-n3IKnGI5U?autoplay=1"
    title="YouTube video player"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    autoPlay
    muted
></iframe>

 

React에서 영상 임베드하기

 useEffect(() => {
    if (videoRef) {
      videoRef.current.play();
    }
  },[]); 
...

<video width="1024" name="my_video" controls autoPlay ref={videoRef}>
 <source src={video} type="video/mp4" />
</video>

 

*git에서는 100mb 이상 푸시가 안되니.. 임베드 할거라면 용량을 잘 확인하고 압축해서 넣자.

한번 푸시했다가 에러 걸려서 reset하고 다시 작업했다..