유튜브배너이미지 모바일에서 사이즈문의드려요

유튜브배너이미지 모바일에서 사이즈문의드려요

QA

유튜브배너이미지 모바일에서 사이즈문의드려요

답변 1

본문

홈페이지 유튜브제이쿼리 사용중인데 모바일에서 같은소스 사용하려고합니다.

문제는 모바일에서 기종마다 이미지사이즈가 달라져야하는데 고정되다 보니깐 화면을늘려도 이미지가 같이늘어지지 않아서 어떻게 해야 바뀌는 알려주세요 ㅠㅠ 부탁드립니다

소스첨부합니다

 

---------------------------------------------------------------------------------------------------------------

<!-- 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

유투브 소스에서 썸네일 뽑아주는 코드도 있지않나요?

모든 모바일 사이즈에 맞춰서 코드를 다 짜놓기엔 작업량이 상당하실거같은데

자동 썸네일기능을 알아보고 사용해보시는게 어떨까요

답변을 작성하시기 전에 로그인 해주세요.
전체 1
© SIRSOFT
현재 페이지 제일 처음으로