[Netflix] Search 페이지 수정, iframe 유튜브 영상 전체 화면

결과

검색 화면의 결과를 TV와 영화로 분리하였다.

검색 화면 결과를 infinite Scroll을 통해 결과를 계속 불러온다.

iframe을 사용해서 불러온 유튜브 영상을 전체 화면이 가능하도록 변경해주었다.

[ 예고편 영상 ]

 

[ 검색 창 ]

---

iframe 유튜브 영상 전체 화면 적용

유튜브 영상에서 공유 -> 퍼가기를 하면 코드로 복사가 가능하다.

하지만, 전체 화면으로 볼 수 없어서 검색해보았더니 

allowfullscreen = 'true'가 아닌 allow='fullscreen'을 적용해주었더니 해결되었다.

 

<!-- 전체 화면 X -->
<iframe
	...
	allow="autoplay;
	allowfullscreen="true" 
    />

<!-- 전체 화면 O -->
<iframe
	...
	allow="autoplay; fullscreen" 
    />

---

계획

페이지를 반응형으로 변경할 예정이다.

netlify를 사용하여 웹사이트를 배포 할 예정이다.

---

느낀 점

추석과 이런저런 일들이 겹치면서 3일 정도 쉬었더니 내가 작성한 코드인데 헷갈리기 시작하는거 같다고 느꼈다.

변수명과 나를 위해서라도 주석을 추가해두는 습관, 파일명 등을 스스로가 통일되게 작성해야할 것 같다고 느끼게 되었다. 

---

코드

https://github.com/ssc9811/scflix-hook

GitHub - ssc9811/scflix-hook: TMDB API를 활용하여 Netflix를 클론한 나만의 Scflix