링크시킨 동영상이 화면 폭에 맞지 않는 문제
본문
유튜브 동영상을 링크시켰는데
iframe에서 width:370 height:200 정도로 수치로 조정하면
윗 사진처럼 폰에서 화면에 맞게 나오는데
width:device-width 로 하면
아래 사진처럼 화면의 80%정도만 나오는데 왜 이런건가요
폰 두 기종에서 모두 그럽니다
답변 4
device-width 속성은 css가 아니라 viewport설정할때 쓰이는 값입니다.
width: 100%;
으로 해보세요
device-width와 width:100% 비교해보시고
어떤게 맞는지 확인후 사용하시면 됩니다.
아니면 가로가 세로가 되었을때 세로의 너비를 가로의 너비로
받아드려서 javascript 가 로드가 되지 않아 생긴문제일수 있습니다.
유튜브 영상 소스복사해서
<iframe width="1038" height="586" src=https://www.youtube.com/embed/asdf frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
이것을 게시판 상단(모바일 상단 내용) html쓰는 곳에 붙여넣기해서 불러 들인 건데
그것이 문제인지, 아니면 다른 곳에서 잘못한 것인지 width:100%로 했는데 변하지 않네요
답변 주셔서 감사합니다
아이 프레임 위에 div로 정의해줘 보세요. 저는 이렇게 해결했어요
<div class="youtube">
<iframe src=".........." frameborder="0"></iframe>
</div>
css 추가
.youtube {
position: relative;
width: 100%;
}
.youtube iframe {
position: absolute;
width: 100%;
height: 100%;
}
감사합니다
처음엔 유튜브 화면이 뜨지 않더니
제 경우
.youtube iframe {
position: relative;
로 바꾸어 보니 잘 되네요.
포기하고 있었는데 정답을 주셔서 감사합니다