홈페이지 메인에 유튜브 화면이 가로로 하면 짤려서 나와요.
본문
핸드폰 화면 세로로 할때는 잘 나오는 부분은 아래 링크를 보면 지난번에 좋은분의 도움으로 해결이 되었는데요.
http://www.namandong.co.kr/theme/mint/css/mobile.css
위의 스크립트에 아래 코드를 넣어서 해결을 했습니다.
@media screen and (max-width: 640px){
#lt_board {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 9/16 = 56.25% */
height: 0;
overflow: hidden;
}
#lt_board iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
}
그런데 아래 그림을 보시면 핸드폰 화면 가로로 할때에는 짤리네요.
혹시 css 도움 주실 분 없으신가요
도움주셔서 미리 감사합니다.
답변 2
아래 css코드 넣어보세요
@media (orientation: landscape) {
#lt_board {
position: relative;
}
#lt_board::before {
display: block;
padding-top: 56.25%;
content: "";
}
#lt_board>iframe {
position: absolute;
top: 0;
left: 0;
width: 100%!important;
height: 100%!important;
}
}
변경이 안되네요
인터넷 사용기록 지우니까 되네요. 감사합니다.
인터넷 사용기록 지우니까 되네요. 감사합니다.
인터넷 사용기록 지우니까 되네요. 감사합니다.
아래 선택자 이용해 가로모드에 맞게 별도로 코딩하셔야 할 듯..
/* 세로모드 (Portrait) */
@media screen and (orientation: portrait) {
/* 세로모드일 때 적용할 스타일 */
}
/* 가로모드 (Landscape) */
@media screen and (orientation: landscape) {
/* 가로모드일 때 적용할 스타일 */
}
답변을 작성하시기 전에 로그인 해주세요.
