[React] Youtube API (3) 참고

https://developers.google.com/youtube/youtube_player_demo?hl=ko 

YouTube 플레이어 데모  |  YouTube IFrame Player API  |  Google Developers

 

• 홈
• 제품
• YouTube>IFrame Player API>샘플 >플레이어 매개변수

 

ifram 삽입코드 복붙해서

import React from "react";

const VideoView = () => {
  return (
    <div className="playVideoBox">
      <iframe
        src="https://www.youtube.com/embed/M7lc1UVf-VE"
        title='youtube video'
        allowfullscreen
      ></iframe>
    </div>
  );
};

export default VideoView;

 

react17 파일참고

 

오류
samsite 뜨는거 
samsite : 쿠키관련, 브라우저에 정보저장하고 사용하기위해 세션스토리지,로컬스토리지, 쿠키 등을 사용
서버가 클라이언트에 정보를 남겨두고 싶음 그래서 쿠키를 사용
(ex name:공지 /공지라는 쿠키가 만료)  이름, 기간, 경로 등을 설정가능
브라우저가 쿠키가 있는지 검사를 함. '있으면 만료일전까지 계속 보여준다. 특정요소는 안보여준다.' 등을
클라이언트한테 쿠키 심어 놓음.

쿠키단점: 쿠키로 악성코드등을 심어 놓거나 등의 문제점이 생김

펄스파티쿠키: 내도메인에 해당하는 쿠키
서브파티 쿠키: 내가아닌 다른 도메인에 해당하는 쿠키

샘사이트:쿠키허용x-요청이 들어갔을때 응답해주고 내꺼에 이상하걸 쿠키 심는걸 막는 정책

그래서 오류가 남

우리껀 아이프레임사용하는데, 이게 유튜브 요청한 거랑 다름
이미지, 도메인 등을 가져올때 요청때문에 samsite오류가 남(다른 일반사이트도 나는데 많음)

유튜브해결방법: 주석달린거대신 -nocookie 포함한거로 씀

유튜브는 쿠키가 없는 도메인을 줌

<iframe
    /* src={`https://www.youtube.com/embed/${id}`} */
    src={`https://www.youtube-nocookie.com/embed/${id}`}
    title="youtube video"
    allowFullscreen>
 </iframe>