유튜브배너이미지 모바일에서 사이즈문의드려요
본문
홈페이지 유튜브제이쿼리 사용중인데 모바일에서 같은소스 사용하려고합니다.
문제는 모바일에서 기종마다 이미지사이즈가 달라져야하는데 고정되다 보니깐 화면을늘려도 이미지가 같이늘어지지 않아서 어떻게 해야 바뀌는 알려주세요 ㅠㅠ 부탁드립니다
소스첨부합니다
---------------------------------------------------------------------------------------------------------------
<!-- GRT Youtube Plugin CSS -->
<link rel="stylesheet" href="grt-youtube-popup.css">
<body style="overflow:hidden">
<!-- 유튜브 -->
<div class="youtube_wrap_m">
<p><img src="<?php echo G5_MOBILE_URL?>/img/tit_youtube.png" width="100%" alt="티엔유튜브영상"></p>
<div class="youtube_m">
<ul>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="mVLfvY2ApRk"><img src="images/youtube_img21.jpg" width="175" alt="유튜브1"></span></a></li>
<li class="youba_m2"><a href="#"><span class="youtube-link" youtubeid="i1bWyM0-5Go"><img src="images/youtube_img14.jpg" width="175" alt="유튜브1"></span></a></li>
<li class="youba_m3"><a href="#"><span class="youtube-link" youtubeid="NN3AvM0pRbo"><img src="images/youtube_img17.jpg" width="175" alt="유튜브1"></span></a></li>
<li class="youba_m4"><a href="#"><span class="youtube-link" youtubeid="_vUCxPTGNpA"><img src="images/youtube_img18.jpg" width="175" alt="유튜브1"></span></a></li>
</ul>
</div>
<div class="youtube_m1">
<ul>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="2LmJc5A3O5o"><img src="images/youtube_img11.jpg" width="175" alt="유튜브1"></span></a></li>
<li class="youba_m2"><a href="#"><span class="youtube-link" youtubeid="mVLfvY2ApRk"><img src="images/youtube_img10.jpg" width="175" alt="유튜브1"></span></a></il>
<li class="youba_m3"><a href="#"><span class="youtube-link" youtubeid="uv1bnm6BhjE"><img src="images/youtube_img8.jpg" width="175" alt="유튜브2"></span></a></li>
<li class="youba_m4"><a href="#"><span class="youtube-link" youtubeid="kmFF1k_Vvno"><img src="images/youtube_img3.jpg" width="175" alt="유튜브3"></span></a></li>
</ul>
</div>
<div class="youtube_m2">
<ul>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="zdZ_PznqTnM"><img src="images/youtube_img2.jpg" width="175" alt="유튜브4"></span></a></li>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="VKE4cIvCZ4w"><img src="images/youtube_img7.jpg" width="175" alt="유튜브5"></span></a></li>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="YxftYm8nWXo"><img src="images/youtube_img6.jpg" width="175" alt="유튜브6"></span></a></li>
<li class="youba_m4"><a href="#"><span class="youtube-link" youtubeid="rldt7K07aag"><img src="images/youtube_img5.jpg" width="175" alt="유튜브7"></span></a></li>
</ul>
</div>
<div class="youtube_m3">
<ul>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="NCycVZDtHJo"><img src="images/youtube_img20.jpg" width="175" alt="유튜브8"></span></a></li>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="6z1qhzAQj-c"><img src="images/youtube_img19.jpg" width="175" alt="유튜브12"></span></a></li>
<li class="youba_m1"><a href="#"><span class="youtube-link" youtubeid="ZDo8MxCI-zU"><img src="images/youtube_img15.jpg" width="175" alt="유튜브12"></span></a></li>
<li class="youba_m4"><a href="#"><span class="youtube-link" youtubeid="WpK1yregMmA"><img src="images/youtube_img16.jpg" width="175" alt="유튜브12"></li>
</ul>
</div>
</div>
<!-- Github button for demo page -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- GRT Youtube Popup -->
<script src="grt-youtube-popup.js"></script>
<!-- Initialize GRT Youtube Popup plugin -->
<script>
// Demo video 1
$(".youtube-link").grtyoutube({
autoPlay:true,
theme: "dark"
});
// Demo video 2
$(".youtube-link-dark").grtyoutube({
autoPlay:false,
theme: "light"
});
</script>
--css-->
/* 유튜브배너모바일 */
.youtube_wrap_m img { max-width: 100%; height: auto; }
.youtube_wrap_m { height: 1000px; display:inline-block; width:100%; min-width:370px; text-align:center; margin-top:50px; background-image: url('../images/youtube_bg_m.jpg'); background-repeat:no-repeat; background-position:50%;}
.youtube_wrap_m p { margin-top: 30px; margin-bottom: 20px;}
.youtube_m { margin: 0 auto; width:370px; height:99px;}
.youtube_m ul {}
.youtube_m li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;}
.youba_m1 { height:98px; text-align:center; margin-right: 5px; }
.youba_m2 { height:98px; text-align:center; margin-right: 5px; }
.youba_m3 { height:98px; text-align:center; margin-right: 5px; }
.youba_m4 { height:98px; text-align:center; }
.youba_m5 { height:98px; text-align:center; margin-right: 5px; }
.youba_m6 { height:98px; text-align:center; margin-right: 5px; }
.youba_m7 { height:98px; text-align:center; margin-right: 5px; }
.youba_m8 { height:98px; text-align:center; }
.youtube_m1 {margin: 0 auto; width:370px; height:99px;}
.youtube_m1 ul { }
.youtube_m1 li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;}
.youba_m1 { height:98px; text-align:center; margin-right: 5px; }
.youba_m2 { height:98px; text-align:center; margin-right: 5px; }
.youba_m3 { height:98px; text-align:center; margin-right: 5px; }
.youba_m4 { height:98px; text-align:center; }
.youba_m5 { height:98px; text-align:center; margin-right: 5px; }
.youba_m6 { height:98px; text-align:center; margin-right: 5px; }
.youba_m7 { height:98px; text-align:center; margin-right: 5px; }
.youba8 { height:98px; text-align:center; }
.youtube_m2 {margin: 0 auto; width:370px; height:99px;}
.youtube_m2 ul { margin-bottom: 5px;}
.youtube_m2 li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;}
.youba_m1 { height:98px; text-align:center; margin-right: 5px; }
.youba_m2 { height:98px; text-align:center; margin-right: 5px; }
.youba_m3 { height:98px; text-align:center; margin-right: 5px; }
.youba_m4 { height:98px; text-align:center; }
.youba_m5 { height:98px; text-align:center; margin-right: 5px; }
.youba_m6 { height:98px; text-align:center; margin-right: 5px; }
.youba_m7 { height:98px; text-align:center; margin-right: 5px; }
.youba_m8 { height:98px; text-align:center; }
.youtube_m3 {margin: 0 auto; width:370px; height:99px;}
.youtube_m3 ul { margin-bottom: 5px;}
.youtube_m3 li { float:left; width:175px; height:98px; line-height:35px; margin-bottom:6px;}
.youba_m1 { height:98px; text-align:center; margin-right: 5px; }
.youba_m2 { height:98px; text-align:center; margin-right: 5px; }
.youba_m3 { height:98px; text-align:center; margin-right: 5px; }
.youba_m4 { height:98px; text-align:center; }
.youba_m5 { height:98px; text-align:center; margin-right: 5px; }
.youba_m6 { height:98px; text-align:center; margin-right: 5px; }
.youba_m7 { height:98px; text-align:center; margin-right: 5px; }
.youba_m8 { height:98px; text-align:center; }
답변 1
유투브 소스에서 썸네일 뽑아주는 코드도 있지않나요?
모든 모바일 사이즈에 맞춰서 코드를 다 짜놓기엔 작업량이 상당하실거같은데
자동 썸네일기능을 알아보고 사용해보시는게 어떨까요
아.. 넵 참고하겠습니다 감사합니다!