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

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

QA

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

본문

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

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

소스첨부합니다

 

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

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

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT