그누보드 에디터 유튜브 반응형 질문입니다.
본문
안녕하세요
<iframe src="https://www.youtube.com/embed/AxJDEvrAmEc?si=lP3HLl-rT-uoZloC" title="YouTube video player" frameborder="0" style="width:560px;height:315px;max-width:100%;border:0;margin:0 auto;">
</iframe>
위 파일을 에디터에 넣으면 pc에서는 560*315크기로 보이는데 모바일에서는 크게 보였다가 또 한참 뒤에 작업하면 모바일 창에 맞게 보였다가 또 시간을 두고 작업하면 크게 보이고 반복을 합니다.
고수님들 왜 이런 현상이 일어나는지 도움 부탁드립니다.
모바일에서 크게 보일때는 max-width가 삭제가 됩니다.
어떤 상세페이지에서는 max-width가 표시되고 또 다른 상세페이지에서는 max-width 삭제되는 이유를 모르겠습니다. 처음에는 서버에서 수정을 할려고 했는데 위 코드를 넣고 정상적으로 보이는 페이지가 있어서 다시 문의 드립니다.
답변 2
보통 웹브라우징시 리소스들이 순차적으로 로드되며
CSS 가 나중에 로드되면 이전에 로드되었던 CSS 들이 변경되기도 합니다.
우선 max-width가 삭제된다고 하셨는데 해당엘리먼트의 CSS 가 어디서 선언되는지 F12 누르셔서 채크해보세요.
뷰페이지에서
#bo_cont iframe { max-width: 100% !important; }
이렇게 추가해 보세요..
모바일에서 작성하는 것이라 확인해보지 않아서 id 명이 다를 수 있습니다.
원인은 정확히 모릅니다만 저렇게 하면 해결은 될 것입니다.