2017/10/31 - [블로그/꾸미기노하우] - 티스토리 서식이 안보일때
2017/10/30 - [TIPS] - 구글 크롬 속도가 느릴때
2017/10/30 - [블로그/운영노하우] - 티스토리 공감버튼 이동시키기
2017/10/26 - [블로그/운영노하우] - 구글 상위노출을 위한 모바일 친화성 테스트
2017/10/25 - [블로그/수익노하우] - 애드센스 입금 안됨 어떻게 해결할까?
유튜브 동영상 사이즈 반응형으로 적용
그리고 주의하셔야 할점이 소스코드를 가져오는 방법이 따로 있다는 사실입니다. 절대로 공유하기 해서 주소를 가져오셔서는 안됩니다.
유튜브 화면에서 보시면 아래쪽에 공유버튼이 있습니다.
공유버튼을 클릭하면, 공유주소가 나타나는데요. 이주소로는 유튜브 재생전용 주소이기 때문에 홈페이지나 블로그에 삽입하는 주소는 아닙니다.
상단의 소스코드 영역을 클릭하여 주세요.
이렇게 진행하시면 iframe 으로 시작하는 소스코드를 보실 수 있습니다. 이러한 코드가 홈페이지에 삽입될 주소입니다.
첨에 제가 포스팅을 다시할까 생각도 해보았는데, 유명한 블로그에서 내용을 가이드 해주고 있어서 소개를 해드립니다.
CMS FACTORY 블로그에서 해당글을 보았는데, 스킨제작도 하고 되게 유명한 곳이죠.
https://www.cmsfactory.net/node/20765
유튜브에서 소스를 가져오면 아래와 같은 양식을 지니게 됩니다.
소스를 보시면 이미 가로크기와 세로크기가 정해져 있으며, 이 크기에 따라서 HTML에 표기가 됩니다. 크기가 고정이 되기에 홈페이지에 해당 소스를 삽입하면 문제가 생겨 버리는데요. 디바이스 해상도에 따라서 화면이 짤리거나 비율이 안 맞게 되어 버립니다.
이걸 해법으로 푼 방법이 참 대단하다 느끼는데요. 가로세로 크기를 아예 없애버리고, 반응형으로 가로길이를 맞추게 한뒤 비율을 위해서 다시한번 태그를 감싸는 방법을 취했더라구요.
1. 유튜브의 가로세로 크기를 제대로 나오게 반응형으로 구성을 한다.
2. 감싸주는 크기를 비율대로 나타나게 한다.
딱 두가지로 구성을 하였습니다. 소스를 보셔서 잘 분석 해보시기 바랍니다. 첨에 유튜브 동영상을 사이즈에 맞게 하려고 이것저것 궁리를 많이 했었는데, CSS를 조금씩 공부하다보니 이제야 눈이 좀 떠지는 느낌입니다.
'IT정보센터' 카테고리의 다른 글
| 포토샵 단축키, 사용꿀팁 안내 (0) | 2023.07.03 |
|---|---|
| 아미나빌더의 업데이트 종료 그리고 나리야빌더 (0) | 2020.09.07 |
| IOS 13 업데이트가 기대되는 이유 (0) | 2019.06.05 |
| 앞으로의 애플 행보 추측 아이폰의 미래 (0) | 2019.05.27 |
| 파이어폭스 퀀텀 출시 안내 (0) | 2017.11.27 |
| 아이피타임 as 경험해보다 (0) | 2017.07.26 |
| 비트코인의 가치, 미래 (0) | 2017.06.18 |
| 무료도메인 등록 손쉽게하기 (0) | 2017.06.05 |
| svn 오류 is a already a working copy fot a different URL 해결방법 (0) | 2017.02.23 |
| 프록시란 무엇일까요? 이용방법 알아보겠습니다. (0) | 2016.04.17 |