블로그 텍스트를 이용해서 유튜브를 만들었습니다
그 동영상을 넣어봤는데요, 비율이 이상합니다. 먼저 유튜브 동영상을 가져보는 방법부터 보겠습니다.
유튜브에서 원하는 동영상을 열고 화면에서 마우스 우클릭, 여기서 소스코드 복사를 선택합니다. 그 위에 동영상 URL 복사는 유튜브 웹주소로 다른 사람에게 이 유튜브 동영상을 추천하거나 알려줄 때 사용합니다. 아래 소소 코드 복사는 사이트에 동영상을 넣고 재생할 때 사용하는 코드입니다.
티스토리에서는 HTML모드에서 유튜브에서 가져온 소스코드를 그대로 넣습니다.
티스토리에서 재생되는 유튜브 동영상입니다. 게시판 폭을 알기 쉽게 텍스트를 입력했는데, 재생되는 유튜브 동영상은 화면 전체를 차지하고 있습니다.
이번에는 구글 블로그에서 유튜브 동영상 넣는 방법입니다. 구글 블로그에서는 HTML모드로 들어가지 않아도 에디터에서 동영상을 넣는 기능을 제공하고 있네요. 같은 구글이라는 깨알 같은 혜택이 있기는 합니다.
어떤 동영상을 선택할 건지 묻습니다. 그러고 보니 난 하나의 유튜브 동영상이 있지만, 여러 개가 있는 사용자도 있겠죠. 어떤 영상을 선택할지 묻습니다.
구글 블로그에서 재생되는 유튜브 동영상입니다.
몇 가지 문제가 나타났는데요, 유튜브 동영상 코드부터 시작하겠습니다.
처음 유튜브에서 동영상 코드를 가져오면
<iframe width="644" height="362" src="https://www.youtube.com/embed/_Z5n_CTAabo" title="중년 남성의 고민 전립선" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
이 코드입니다. 여기서 width="640" height="360" 동영상 크기는 고정값이 아닌 유튜브가 재생하는 크기에 따라서 달라집니다. 유튜브 화면을 넓혔다 줄였다 해서 코드를 가져오면 알 수 있습니다.
그리고 이 코드를 티스토리에 넣으면 그대로 들어갑니다.
<p data-ke-size="size16">티스토리 유튜브 동영상 넣기</p>
<p data-ke-size="size16"> </p>
<p><iframe src="https://www.youtube.com/embed/_Z5n_CTAabo" width="644" height="362" frameborder="0" allowfullscreen=""></iframe></p>
코드를 복사해서 넣고 재생 확인 후에 다시 티스토리 HTML로 들어가면 코드 중 많은 것이 사라지고 티스토리 입맛에 맞는 것만 추려져 있습니다. 그래도 재생 화면 크기는 변하지 않는데요, 그런데 티스토리 화면에는 게시판 전체 크기로 재생되고 있는데요, 동영상 크기를 손톱만큼 줄여도 게시판 100% 크기로 나오더군요. 이 문제는 다음 기회가 되면 살펴보겠습니다.
지금 중요한 것은 유튜브에서 가져온 동영상 크기가 티스토리에 들어갈 때도 숫자가 변하지 않았다는 겁니다.
이번에는 구글 블로그를 보겠습니다.
<p> 구글 블로그 유튜브 동영상 넣기</p><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/_Z5n_CTAabo" width="320" youtube-src-id="_Z5n_CTAabo"></iframe></div><br /><p><br /></p>
유튜브 동영상 크기가 임의로 바뀌었습니다. 단순히 화면 크기만 바뀌었다면 반응형 등의 이유로 그럴 수도 있겠다 싶었지만, 다시 확인해 볼까요.
644:362 와 320:266입니다.
유튜브에서 제공한 비율: 644:362 (약 16:9)이며, 구글 블로그에서 바뀐 비율은 320:266으로 (약 1.2:1 비율)입니다. 크기는 바뀔 수도 있지만, 비율은 바뀌면 재생되는 동영상 화면이 이상하게 되잖아요, 그런데도 왜 이렇게 바뀔까요.
그런데 그럴 수 있는데요, 처음에는 이상했지만, 반응형 구조에서는 노트북 등의 화면과 모바일에서의 화면 비율이 다르니 사용자의 편의를 위해 동영상 크기가 조정됩니다. 그래서 320:266을 가로 크기를 450으로 키우면 (266*450)/320 = 374.0625됩니다.
익숙하지 않은 비율이라서 어색했지만, 그래도 나보다는 구글이 더 잘 알고 있고 사용자의 반응도 받아내는 기술이 좋을 것 같아 그 비율로 넣었습니다. height="370" width="450" 이렇게 넣어도 화면은 이상 없고 다른 느낌 또한 없었습니다. 그리고 반응형이라는 것을 잊으면 안 됩니다. 게시판에서 어떤 크기로 조정하더라도 모바일에서는 그 환경에 맞는 크기로 재생됩니다. 다만 블로그에서는 게시판 에디터를 통해서 유튜브 동영상을 가져왔을 때 그 크기는 변하지 않고 적용되기에 취향에 따라 숫자를 바꿔줄 필요가 있습니다.