블로그나 홈페이지에 유튜브 동영상 넣기
먼저 HTML이 수정및 입력이 가능한 티스토리에서 유튜브 동영상을 넣는 방법 입니다. 티스토리 화면에서 글쓰기 화면을 눌르시면 아래 처럼 텍스트를 입력할수 있는 창이 나오는데 여기서 오른쪽 상단 화살표가 표시된 HTML을 눌러서 HTML코드를 넣을수 있는 화면으로 전환 하신뒤에 방금전 복사했던 코드를 붙여넣는 것만으로도 유튜브 동영상 넣는 작업이 끝나게 됩니다.
다음은 개인 웹사이트에서 유튜브 동영상을 넣는 방법인데 간단히 메모장으로 설명 드리겠습니다. 메모장을 실행한뒤에 HTML기본 구문을 입력 하신뒤에 유튜브 동영상에서 복사한 코드를 넣어주시면 됩니다.
<html>
<head></head>
<body>
유튜브에서 복사한 소스코드
</body>
</html>
파일을 저장하실떄는 확장자에 .html을 붙여주시고 저장 하시면 됩니다.
파일저장 하면 아래 나온 이미지 처럼 html파일이 하나 생성되었습니다. 생성된 파일을 더블 클릭하면 특정 웹페이지에 접속 하지 않아도 유튜브 동영상을 볼수 있습니다. 이런식으로 마음에 드는 유튜브 동영상을 저장 하는것도 좋은 방법이 되겠습니다. 물론 동영상 자체 파일을 다운 받는것이 아니기 떄문에 인터넷에 연결되지 않았다면 동영상 재생이 안됩니다.
그러면 이번엔 유튜브 소스코드에서 각각 의미하는 것이 무엇인지 한번 알아 보겠습니다. 복사한 소스코드는 아래와 같습니다.
<iframe width="854" height="480" src="https://www.youtube.com/embed/42Gtm4-Ax2U" frameborder="0" allowfullscreen></iframe>
하나씩 뜯어서 살펴 보자면 위구문은 모두 HTML태그중 iframe라는 태그를 사용한것입니다. HTML 태그중 하나로 HTML 문서내에 다른 HTML을 표현할때 사용하는 태그입니다. 특별한 구문이 아닌 HTML에 iframe에서 조절이 가능한 속성들입니다.
width = "854" 최초 넓이를 854px로 지정하겠다는 애기
height="480" 최초 높이를 480px로 지정하겠다는 애기
src="" 역역은 실제 iframe을 가져오기 위한 웹페이지 주소라고 보시면 됩니다.
frameborder=0 영역은 경계선에 대한 두께를 조정하기 위한 수치이고 숫자0에서 숫자를 높일수록 영역에 두께가 표시 됩니다.
allowfullscreen 속성은 iframe영역에 대해서 전체화면을 허용할것인지 여부 입니다. allowfullscreen이 들어가 있으니 전체화면 표시가 되겠습니다.
추가적으로 유튜브에서 제공하는 매개변수표 사진을 첨부합니다. 출처는 (https://developers.google.com/youtube/player_parameters?hl=ko#autohide) 이곳에서 가져왔으니 좀더 자세히 유튜브를 컨트롤 하실 분들은 해당 페이지에서 보시는게 도움이 될것 같습니다.
위 유튜브 파라메터 표는 이미지라 검색이 안됩니다. 사이트에 이미지가 좀짤려서 제가 직접 코드를 따와서 이미지를 합쳤습니다. 나름대로 상세하게 작성한다고 했는데 도움이 되셨으면 좋겠습니다.
가장 간단한 것은 그냥 소스코드를 복사해서 블로그나 웹사이트에 복사해서 붙여 넣기만 하는것이 가장 간단 합니다. 물론 개인 웹사이트는 사이즈 조정이나 컨트롤 할일이 좀있겠지만요.
