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