모바일에서 영상을 100%로 보게 하려면 어떻게 해야할까요?
본문
비메오 영상을 아래와 같은 코드로 넣습니다.
<center><iframe src="https://player.vimeo.com/video/영상의고유번호?
title=0&byline=0&portrait=0&autoplay=1" style="width:600px; height:340px"allowfullscreen="true"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></center>
여기에서 영상의 사이즈를 600 340으로 정하다보니
모바일로 가면 영상이 너무 커서 화면에 다 안나오는 현상이 발생합니다.
모바일로 가면 영상이 자동으로 가로 100%로 되는 방법이 있을까요?
답변 1
<div class="video-container">
<iframe src="https://player.vimeo.com/video/비디오ID" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
감사합니다.
이렇게 하니 모바일에서 100%로 나오네요^^
그런데 pc용에서도 화면에 꽉차게 100%로 나와요ㅠㅠ
pc용에서는 크기를 지정할수 있을까요?
@media (min-width: 768px) {
.video-container {
width: 600px;
margin: 0 auto
}
}
를 추가해주세요~
감사합니다^^
잘 되네요~
답변을 작성하시기 전에 로그인 해주세요.
