예제 소스 코드
<iframe width="560" height="315" src="https://www.youtube.com/embed/YQHsXMglC9A?rel=0&" frameborder="0" allowfullscreen></iframe>
위 예제 유튜브 소스 코드는 요즘 화제가 되고 있는 영국 출신 여가수 Adele의 Hello라는
MV입니다.
이처럼 유튜브에서 복사된 소스 코드를 다른 웹 사이트로 퍼 옮길 때 휴대폰 및 태블릿 등
모든 디바이스 기기에서 잘려 나가지 않는 화면으로 재생되게 하려면 간단하게 적용할 수 있습니다.
위 소스 코드를 예로 든다면 가로폭 부분인 <iframe width="560" 픽셀을 <iframe width="100%"로
바꿔 게시하면 유튜브 동영상이 반응형으로 전환되어 디바이스에 따라 화면의 크기 차이는 있을지라도
온전한 유튜브 동영상을 시청할 수 있습니다.
그러나 이 방법은 가로폭에만 유도리(?)융통성을 주었기 때문에 동영상에 따라 세로폭에 여백이 생길 수 있어
모든 디바이스에 최적화된 방법이라고 말할 수 없을 것 같은데요.
Daum 카페 블로그 및 네이버 카페 블로그는 딱히 다른 방법이 보이질 않아 위 방법을 사용해야 겠지만
티스토리 블로그처럼 HTML / CSS 편집이 가능한 웹 사이트는 좀더 최적화된 팁을 사용할 수 있습니다.
티스토리에서 모든 디바이스에 최적화된 유튜브동영상 올리기 |
티스토리 블로그에서 유튜브 동영상을 삽입하는 방법은 대략 세가지 정도가 있는데요.
플러인 설정으로 넣는 방법과 글쓰기 에디터에서 외부컨텐츠 탭 사용, 또는 글쓰기 HTML 모드에서
직접 삽입하는 방법이 있을 텐데요.
오늘 소개할 팁은 외부컨텐츠 탭 사용과 직접 넣어 주는 방법에 해당된다고 말할 수 있겠네요.
주저리 주저리 설명드리자면... 먼저 아래 코드를 관리자 화면 > HTML/CSS 편집, CSS에 추가합니다.
(알기 쉽게 CSS 맨 하단에 추가해 주면 좋겠지요?)
/* 유튜브 모든 디바이스 적용 */
.youtubeWrap {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
.youtubeWrap iframe {
position: absolute;
width: 100%;
height: 100%;
}
코드 복사가 안 되는 분은 텍스트 파일을 내려받으세요.css 추가 코드.txt
CSS에 코드를 추가하고 저장 했으면 유튜브 동영상 소스 코드를 본문에 넣고 적용해야 할 텐데요.
유튜브 동영상을 퍼 갈 때 기본 권장 동영상 크기(560x315)에서 추천 동영상 표시를
체크 해제(제 기준)하고 소스 코드를 복사합니다. 그러면 위 예제 소스 코드처럼 복사되는데요.
복사된 예제 소스 코드를 설명하자면... 빨간색 텍스트로 표시된 가로폭과 세로폭은 지워야할 부분이구요.
<iframe width="560" height="315" src="https://www.youtube.com/embed/YQHsXMglC9A?rel=0&" frameborder="0" allowfullscreen></iframe>
삭제된 가로폭과 세로폭의 소스 코드를 아래와 같이 div 태그로 감싸 준 후...
<div class="youtubeWrap">
<iframe src="https://www.youtube.com/embed/YQHsXMglC9A?rel=0&" frameborder="0" allowfullscreen></iframe>
</div>
글쓰기에서 HTML 모드로 전환하여 본문에 직접 넣어 주거나, 외부컨텐츠 탭을 열어 소스입력란에 넣어 주면
모든 디바이스에 최적화된 유튜브 동영상으로 재생됩니다.
이 글에 도움이 된 원문 출처 블로그
'블로그 Tip' 카테고리의 다른 글
애스센스 게시자라면 꼭 설치해야 할 크롬 플러그인 (2) | 2016.02.07 |
---|---|
티스토리 블로그와 스토리채널 연동하기 (2) | 2016.01.07 |
[이미지 용량 줄이기] 무료 이미지 압축 웹사이트 (0) | 2015.12.15 |
귀하의 사이트에서 애드센스 광고 게재가 중단되었습니다. (1) | 2015.11.14 |
티스토리 데스크탑 웹용 애드센스 플러그인 (1) | 2015.11.03 |
블로그에 구글,네이버 애널리틱스 플러그인 적용하세요! (0) | 2015.10.05 |