그누보드 유튜브 영상 크기 PC와 모바일 반응형 크기조절

그누보드 게시물외에 다른 게시판에서도 동일한 현상이 보여지지 않을까 생각합니다.

 

유튜브영상을 iframe 형태의 소스로 올리게되면 PC 버전에서는 정상적으로 나오게되지만 모바일에서는 PC 화면의 크기로 보여지게되면서 화면 일부분이 짤려 나오게됩니다.

 

결국 플레이 버튼도 보이지 않기에 영상을 볼 수도 있고 또 화면자체가 이미 볼 수 없는 비율이 되어버렸다는것입니다.

 

이런 경우에는 약간의 작업이 필요한데요?

 

유튜브에서 동영상주소를 복사하든 소스복사를 하든 본 동영상의 아이디가 있을것입니다.

아래 그림은 동영상주소 복사를 통해서 얻어온 영상주소인데요?

마지막 0zeKDglbNm8  이 부분이 동영상ID 입니다.

 

https://youtu.be/0zeKDglbNm8

 

이 아이디를 아래 <div> 와 <iframe>으로 둘러쎃인 태그안의 내용중에서 유튜브 영상주소의 동영상ID 부분에 복사해온 아이디를 대신 입력하시기 바랍니다.

 

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/동영상ID" frameborder="0" allowfullscreen></iframe>
</div>

 

동영상ID 를 입력한후에 이 소스전체를 복사하여 유튜브영상이 필요한곳에 붙여넣기 하시면 PC버전에서나 모바일버전에서나 모두 창에 맞게 즉 반응형으로 볼 수가 있게됩니다.

아래 그림과 같이 말이죠~

 

PC버전은 기본적으로 잘 나오기에 생략했구요 ~

아래그림은 모바일버전에서 화면 비율에 맞게 나온 모습입니다.

 

한번씩 테스트해보세요~~