모바일에서 카카오tv 영상 아이프레임이 사이즈가 넘쳐서 나오는데 조절 할수 있는 방법 있을까요?
본문
유튜브도 모바일에서 넘쳐서 나오다가
<!-- 유튜브 제어 -->
<script type="text/javascript">
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $("iframe").each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr("src")) ){ $(this).css("width","100%"); $(this).css("height",Math.ceil( parseInt($(this).css("width")) * 480 / 854 ) + "px");} }); }
</script>
<!-- 유튜브 제어 -->
위 스크립트 소스를 넣으니 정상적으로 모바일에서도 나오더라구요.
사이트는 반응형 사이트입니다.
카카오tv
<iframe src="https://kakaotv.daum.net/embed/player/cliplink/rvcwik85ez1ftsifcq7zrgqqm@my?service=daum_cafe" width="712" height="400" frameborder="0" scrolling="no"></iframe>
이런 카카오tv 영상 아이프레임을 모바일에서 잘 나오게 할수 있는 방법이나 스크립트 있을까요 ?
도움좀 부탁드립니다.
답변 2
width="712" 를 width="100%" 으로 해보실레요?
유저들이 글작성할때 넣는 소스인데 제가 일일이 다 수정할수가 없어서요
해당 iframe 태그를 css로 모바일폭일떄 width:100%을 줘보세요.
@media all and (max-width:600px){
iframe{
width:100% !important;
max-width:100%;
}
}
width="712" 를 width="100%" 으로 해보실레요?