안녕하세요 낭만고양이 입니다. 오늘은 유튜브(YouTube) 동영상을 꽉찬화면으로 넣는 방법에 대해 알아보도록하겠습니다. 서식에 등록해놓고 간편하게 불러와서 사용하시면 됩니다.초보자도 쉽게 따라하실수 있으니 한번 시도해보세요~^^ 티스토리 블로그에서는 잘 되는것을 확인하였습니다. 다른 블로그에서는 안될수도 있겠습니다.
우선 유튜브 동영상을 공유할려면 고유 주소를 아셔야 합니다. 고유주소란 유튜브 동영상 아래에 보면 공유 버튼이 있는데 이것을 누르면 아래와 같이 나옵니다. 빨간색 밑줄친 부분이 고유주소입니다.
고유주소를 알수있는 또 다른방법은 웹브라우져(인터넷 익스플로러, 사파리, 크롬, 오페라 등) 상단에 url 표시되는 부분을 보시면 아래와 같이 나오는데 빨간색 밑줄친 부분이 고유주소입니다.
자 이제 고유주소를 알았으니 본격적으로 적용해보도록하겠습니다. 원하는 유튜브 동영상의 고유주소를 복사해놓으세요. 그런다음 아래 소스에서 고유주소 라는 부분 대신 아까복사한 코드를 붙여넣으세요
<style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class='embed-container'> <iframe src='https://www.youtube.com/embed/고유주소' frameborder='0' allowfullscreen> </iframe></div> | cs |
바꿔치기 했다면 이제 소스를 복사해서 html 에 체크한후 붙여넣으시면 유튜브 동영상이 꽉찬화면으로 나올것입니다.
CCS 소스는 미리 관리자화면>스킨편집>HTML 편집>CCS 메뉴에 들어가셔서 미리 한번만 등록해놓으시면 소스가 더 간단해지겠지요. 고수님들은 무슨 뜻인지 아실듯.. 모르면 패스하셔도 되는 내용입니다. 패스~~~
<style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class='embed-container'> <iframe src='https://www.youtube.com/embed/_qmcg4vqmVg' frameborder='0' allowfullscreen> </iframe></div> | cs |
저는 위 와같이 소스를 만들어서 적용하니 아래와 같이 동영상이 나옵니다. 꽉찬화면 으로 동영상이 나오니 더 보기 좋네요~~
저는 이렇게 만든 소스를 서식에 등록해놓고 필요할때 마다 쉽게 불러와서 사용하고 있습니다.서식으로 불러와사ㅓ 고유주소만 바꿔주면 되니깐요~ 여러분들도 서식에 등록해놓고 사용해보세요 엄청 편리합니다. 이상으로 유튜브 동영상 꽉찬화면으로 나오게하는 꿀팁이였습니다. 즐거운 하루 되세요~~^^
댓글