html5 동영상 디바이스 사이즈 자동 조절
본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>aa</title>
<script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
<style type="text/css">
body{
background-color: #020407;
}
h1{
background-color:yellow;
}
p{
background-color:rgb(246, 246, 246);
}
video{
width:100%;
max-width:640px;
height:auto;
}
</style>
<script>
$(function() {
$("#post_content img, .resizablebox").each(function() {
var oImgWidth = $(this).width();
var oImgHeight = $(this).height();
$(this).css({
'max-width':oImgWidth+'px',
'max-height':oImgHeight+'px',
'width':'100%',
'height':'100%'
});
});
});
</script>
</head>
<header>
<div id = "post_content">
<img src="img/hdline.jpg" /></div></header>
<body>
<iframe width="310" height="170" src="http://serviceapi.nmv.naver.com/flash/convertIframeTag.nhn?vid=F73017BF2EFBB3DF9B12B9822D7AE024021C&outKey=V1229034151b072d465aa7e48f7778b839e76f59f42c36dc09b417e48f7778b839e76" frameborder="no" scrolling="no"></iframe>
<p>"KIA 새식구 노예시, 패스트볼 평균"</P>
<P>KIA행 스프루일, 제 2의 나이트 될 수 있을까</P>
<P>스프루일 입단...프리미어12가 결정적이었다</P>
<P>'FA 빈손' KIA의 겨울, 1년 전 고민 '리플레이'</P>
</body>
<FOOTER>
<P>푸터입니당</P>
</FOOTER>
</html>
웹앱 제작중입니다.
<div id = "post_content"> 사용해서 이미지는 디바이스에 맞게 사이즈 변경이 되는데
동영상은 변경이 안됩니다.
동영상은 네이버나 유투브 동영상 사용합니다.
비디오태그 사용하면 동영상 재생이 안되고
네이버나 유투브 제공하는 아이프레임 가져와서 쓰면 사이즈 변경이 자동으로 안됩니다.
네이버, 유투브 동영상 아이프레임이 디바이스에 맞게 자동 변경되거나
아이프레임 비디오태그에서 실행하는 방법 알고싶습니다.
답변 1
<iframe width="310" height="170"
이렇게 사이즈가 정해져 있어서 그런것일텐데요.
css를 활용해서 디바이스 사이즈 별로 지정을 하시거나...
width:100%; height:auto;를 사용해보세요.
답변을 작성하시기 전에 로그인 해주세요.