테스트 사이트 - 개발 중인 베타 버전입니다

링크시킨 동영상이 화면 폭에 맞지 않는 문제 채택완료

물자리 6년 전 조회 2,571

유튜브 동영상을 링크시켰는데

iframe에서 width:370 height:200 정도로 수치로 조정하면

윗 사진처럼 폰에서 화면에 맞게 나오는데

width:device-width 로 하면 

아래 사진처럼 화면의 80%정도만 나오는데 왜 이런건가요

폰 두 기종에서 모두 그럽니다

 

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
6년 전

device-width 속성은 css가 아니라 viewport설정할때 쓰이는 값입니다. 

 

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%;

}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

물자리
6년 전
감사합니다
처음엔 유튜브 화면이 뜨지 않더니
제 경우
.youtube iframe {
position: relative;
로 바꾸어 보니 잘 되네요.
포기하고 있었는데 정답을 주셔서 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

6년 전

유튜브 영상 소스복사해서

<iframe width="1038" height="586" src=https://www.youtube.com/embed/asdf">https://www.youtube.com/embed/asdf frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

이것을 게시판 상단(모바일 상단 내용) html쓰는 곳에 붙여넣기해서 불러 들인 건데

그것이 문제인지, 아니면 다른 곳에서 잘못한 것인지 width:100%로 했는데 변하지 않네요

답변 주셔서 감사합니다

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

6년 전

device-width와 width:100% 비교해보시고 

어떤게 맞는지 확인후 사용하시면 됩니다.

 

아니면 가로가 세로가 되었을때 세로의 너비를 가로의 너비로

받아드려서 javascript 가 로드가 되지 않아 생긴문제일수 있습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인