티스토리 블로그에 유튜브 영상 넣기 (iframe)
및 동영상 가운데 정렬하는 방법
이미 많은 분들이 아실 테고 기초적인 정보이지만 혹시라도 모르시거나, 플러그인을 쓰지 않고 직접 html 코드로 컨트롤하는 법이 궁금하실 분들을 위해, 정리해 봅니다. 방법은 너무나도 간단하고, 반응형까지 알아서 지원돼서 모바일에서 동영상 크기를 전혀 신경 쓰지 않으셔도 됩니다! 저는 플러그인이 있는지도 모르고 늘 하던 대로 했는데, 의외로 가운데 정렬이 제가 알던 방식으로 안 돼서 티스토리에 맞췄네요!
# 티스토리 블로그에 유튜브 동영상 넣는 방법 (1분 컷)
1. 유튜브(Youtube)에서 가져오고 싶은 영상을 찾은 뒤 우측 하단에 [공유] 버튼 클릭
2. [퍼가기] 클릭
3. 우측에 나오는 <iframe> ~ </iframe> 끝까지 전체 복사 : 하단에 [복사] 버튼 누르면 한번에 복사 가능
4. 티스토리 글쓰기 에디터 > HTML에 3에서 복사한 코드 붙여 넣기
5. 기본모드로 돌리면 동영상이 잘 들어간 것이 확인됨. (BUT. 기본이 좌측 정렬)
# 티스토리 블로그에서 유튜브 동영상 가운데 정렬하기 (1분 컷)
그런데 이렇게 유튜브 영상을 연동해서 블로그 포스팅 안에 넣은 것까지는 좋은데 한 가지 문제가 있죠! 바로 가운데 정렬이 안 되어 있다는 것입니다. 기본이 왼쪽 정렬로 딱 붙어 있어요. 그래서 이걸 조정해서 가운데로 보내줘야 합니다. 이것도 몇 초도 안 걸리게 매우 간단합니다.
바로 이 마법의 태그 <div align="center"> ~ </div>로 동영상 코드였던 <iframe></iframe> 태그 바깥을 감싸주면 되요. html 태그 기초를 아시는 분들은 이해가 쉬우실 텐데 태그는 여는 태그와 닫는 태그가 있습니다. '/' 이 슬래시가 앞에 붙으면 바로 닫는 태그로서, 태그가 끝났다, closing 한다는 의미로 생각하시면 됩니다. 이해가 쉽도록 캡처 화면 첨부하겠습니다.
<div align="center">
<iframe> ~</iframe>
</div>
이런 구조가 되겠습니다. 만약에 동영상 가로, 세로를 세밀하게 조정하고 싶으시면 iframe width="560" height="315" 이 부분의 숫자 값을 바꿔주시면 되는데요. 웬만하면 저는 안 건드리는 편입니다. 반응형 맞춰 일일이 조정하기도 힘들고 웬만하면 보기 좋게 잘 나오는 것 같아요!
위와 같이 그대로 입력을 해주시면 짜잔! 이렇게 동영상 가운데 정렬까지 완벽하게 끝납니다!
근데 제가 굳이 왜 이 영화 OST로 동영상 삽입 및 가운데 정렬 방법을 설명 드렸을까요? 바로 제가 얼마 전에 영화 El Angel 리뷰 포스팅에서 추천 드렸던 곡이었기 때문입니다. 사실 제가 영화 리뷰에서 OST를 일일이 찾아서 제목과 가수는 표기하지만, 그전까지는 애드센스 승인에 영향이 미칠까 봐 노파심에 영상을 마음껏 못 넣었거든요. ㅠㅠ 그래서 이번 기회에 같이 첨부해봤습니다. 관심 있는 분들은 남미 감성 아르헨티나 영화와 함께 좋은 음악도 즐겨 보세요! ^^
2021.03.17 - [Movie & Drama/🎬 영화] - [아르헨티나 영화] El Angel 2018 - 엔젤, "죽음의 천사"
[아르헨티나 영화] El Angel 2018 - 엔젤, "죽음의 천사"
아르헨티나 범죄, 퀴어 영화 El ángel 2018 엘 앙겔 / El Angel, 엔젤 "범죄 장르임은 잊고 미장센과 OST, 잘생긴 사이코에 2시간 동안 매료되는 영화" "주연이자 신예 로렌조 페로의 발견" "남남 케미스
euphoria25.tistory.com
(+) 저는 플러그인이 있는 줄 모르고 코딩할 때 일반적인 위 방법을 썼는데요. 티스토리 메뉴 > 플러그인 > Youtube 동영상 첨부 라는 메뉴가 편리하게도 있었습니다! 초보자 분들은 거기서 '적용'하시고, 글 쓰실 때 3개 점 모양 아이콘(더보기) 클릭하시면 플러그인 바로 사용 가능합니다!
댓글