유튜브 동영상을 반응형 홈페이지나 티스토리에 적용하는 소스 및 방법 소개

유튜브 동영상을 반응형 홈페이지나 티스토리에 적용하는 소스 및 방법 소개

최근에 멀티미디어 컨텐츠들이 범람하면서 홈페이지나 포스팅시에 동영상을 첨부하는 일들이 비일비재 하는데요.

특히나 요즘같은 경우에는 스마트폰의 엄청난 보급으로 인해 PC상의 화면들이 모바일에서도 어그러지지 않고 제대로 구현이 되어야 합니다. 

그래서 오늘은 반응형 홈페이지나 티스토리 블로그에서 유튜브 동영상 넣는 방법을 소개해드리려고 합니다.

당연히 유튜브 동영상도 반응형으로 화면 크기에 맞춰 구현이 되어야겠죠.

홈페이지 만들어본 경험이 있으시거나 html을 조금만 알면 쉽게 적용시킬수 있답니다. 

준비할 것은 아래 스타일을 먼저 추가합니다. 

자주 사용할 것 같다면 아예 CSS파일에 올리고 사용하시면 더욱 편하게 적용하실 수 있답니다.

다음으로 적용할 포스팅이나 본문 작성시에 아래 html 소스를 넣어주시면 된답니다. 
아래 소스에서 동영상 주소는 공유 버튼 누르면 나오는 https://youtu.be/ 다음에 나오는 주소를 넣으면 된답니다.

이렇게 유튜브 동영상을 불러오는 소스를 넣으면 화면 크기에 따라 유튜브 동영상도 자유자재로 변경할수 있는 것이죠.

그럼 직접한 번 해볼까요? 아래와 같이 소스를 적용시켰더니~

자 적용한 소스를 미리보기 해보면

↑ 이건 PC에서 보는 화면

↑ 이건 모바일에서 보는 화면

아주 잘 적용되었네요.^^

유튜브 동영상 변환시 어렵게 변환싸이트 찾지 마시고 소스 잘 저장해놨다가 유용하게 쓰시길~

도움 되었길 바래요^^ 뿅~