알림
뒤로

인스타 영상 리스트 코드

대미회
플로팅배너
2022-04-18
조회수 33



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

  $(".playlist").mCustomScrollbar({

   theme:"light-thick",

   scrollButtons:{

    enable:true

   }

  });

 });

</script>

<section id="tab_video_wrap">


 <div class="gallery_tab">

  <ul>

   <li id="tab1">안티에이징</li>

   <li id="tab2">피부관리</li>

   <li id="tab3">스킨부스터</li>

   <li id="tab4">피어봄소개</li>

  </ul>

  <div class="link pc_view"><a href="https://www.youtube.com/channel/UCJgqMyv08VVO4AXuErYQAlg" target="_blank"><img src="https://cdn.imweb.me/upload/S202101116cfb996790eb5/a7d259631b47a.jpg" alt="" /></a></div>

 </div>

 <div class="video_player">

  <div>

   <iframe src="https://www.youtube.com/embed/xJnd_badMg8?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  </div>

 </div>

 <div class="link mo_view"><a href="https://www.youtube.com/channel/UCJgqMyv08VVO4AXuErYQAlg" target="_blank"><img src="https://cdn.imweb.me/upload/S202101116cfb996790eb5/daa90fc76592e.jpg" alt="" style="width:100%;margin-top:2%;"/></a></div>

 <!--플레이리스트-->


 <!--1안티에이징-->

 <div class="playlist mCustomScrollbar visible" id="list1">

  <ul>

    <li dataUrl="xJnd_badMg8" class="on">

    <img src="https://img.youtube.com/vi/xJnd_badMg8/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>보톡스 후 주름필러, 어떤 효과가 있을까?!</p></div>

   </li>

   <li dataUrl="o0AX3Bkrqb8">

    <img src="https://img.youtube.com/vi/o0AX3Bkrqb8/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>콧등/이마/눈가/미간 주름필러 리얼 후기!</p></div>

   </li>

   <li dataUrl="UAUb5cDj-jU">

    <img src="https://img.youtube.com/vi/UAUb5cDj-jU/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>『목주름』 확실하게 없애려면 이것부터 확인!!</p></div>

   </li>

    <li dataUrl="0zZGfTbPk8w">

    <img src="https://img.youtube.com/vi/0zZGfTbPk8w/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>강력한 안티에이징 관리 방법! 하지만 초.간.단!! - (썬크림/보톡스) 【피어봄】</p></div>

   </li>

   <li dataUrl="QZ0RK69cdLk" >

    <img src="https://img.youtube.com/vi/QZ0RK69cdLk/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>『팔자주름 순삭!!』 - 슈링크? 실리프팅? 필러? 없애는 방법 중에 제일 효과적인 것은?! 【피어봄】</p></div>

   </li>

   <li dataUrl="CK1Pvt6BGTQ">

    <img src="https://img.youtube.com/vi/CK1Pvt6BGTQ/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>주름보톡스로 없어지지 않는 깊은팔자주름, 【피어봄의 주름필러】로 해결할 수 있다!!</p></div>

   </li>

   <li dataUrl="8xWRbnxx3mo">

    <img src="https://img.youtube.com/vi/8xWRbnxx3mo/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>피부처짐, 탄력개선, 눈밑다크써클! 각종 피부문제 해결을 위해 【피어봄】이 나섰다!</p></div>

   </li>

   <li dataUrl="4MPNcKtygTE">

    <img src="https://img.youtube.com/vi/4MPNcKtygTE/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>팔자주름이 생기는 이유, "도대체 왜?" 원인부터 차근차근 【피어봄】이 알려드려요!</p></div>

   </li>

   <li dataUrl="TdR_wvMvqU0">

    <img src="https://img.youtube.com/vi/TdR_wvMvqU0/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>주름과 탄력 잡는 초음파리프팅, 슈링크 후 볼꺼짐/패임 부작용?! 그 진실을 【피어봄】이 알려주지!</p></div>

   </li>

   <li dataUrl="gbwrOFZ6cTI">

    <img src="https://img.youtube.com/vi/gbwrOFZ6cTI/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>주름보톡스 VS 주름필러 같은 시술이 아니라고!! 【피어봄】과 함께 알아BOA요! </p></div>

   </li>

   <li dataUrl="sOcujymzdns">

    <img src="https://img.youtube.com/vi/sOcujymzdns/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>슈링크 VS 인모드 VS 실리프팅 - 처진 얼굴에는 어떤 시술이 적합할까?! 【송도 피어봄】</p></div>

   </li>

  </ul>

 </div>

 <!--//1안티에이징-->

 <!--2피부관리-->

 <div class="playlist mCustomScrollbar" id="list2">

  <ul>

    <li dataUrl="mTaKuPbf4hs" class="on">

    <img src="https://img.youtube.com/vi/mTaKuPbf4hs/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>피부가 좋아지는 병원 MD 화장품 완벽 리뷰!</p></div>

   </li>

    <li dataUrl="cVx3vU3GZmg">

    <img src="https://img.youtube.com/vi/cVx3vU3GZmg/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>"레이저토닝"에 대한 오해와 그 진실들, 효과와 부작용까지 【피어봄】과 파헤치기!</p></div>

   </li>

    <li dataUrl="TcGG1MljFMU">

    <img src="https://img.youtube.com/vi/TcGG1MljFMU/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>얼굴붉어짐(안면홍조) 치료방법? - 모공/피부보습/탄력/피부톤개선은 덤!! ★인텐스울트라★</p></div>

   </li>

   <li dataUrl="ztH2udS4u-I">

    <img src="https://img.youtube.com/vi/ztH2udS4u-I/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>[피어봄의 REAL CASE] 피부 정밀진단 장비 마크뷰, 피부타입/모공/피부톤/색소/피지/주름까지 확인 가능!</p></div>

   </li>

   <li dataUrl="J0-QfQzepi0">

    <img src="https://img.youtube.com/vi/J0-QfQzepi0/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>피부를 위한 올바른 클렌징 방법! :: "2중 세안" 【피어봄】이 알려드립니다!</p></div>

   </li>

   <li dataUrl="SRpB_mZ7jaI">

    <img src="https://img.youtube.com/vi/SRpB_mZ7jaI/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>클렌징오일을 추천하는 이유!!ㅣ피어봄이 말해 주는 "클렌징 오일"</p></div>

   </li>

   <li dataUrl="Myqn3Nk9x8Y">

    <img src="https://img.youtube.com/vi/Myqn3Nk9x8Y/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>★중요★ CO2레이저(편평사마귀,비립종,피지선증식증) 후 듀오덤 관리방법!! - 【피어봄】</p></div>

   </li>    

   <li dataUrl="jVdl1n67K7E">

    <img src="https://img.youtube.com/vi/jVdl1n67K7E/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>홍조, 여드름, 흉터, 모공 잡는 엑셀브이/프락셀/Co2 레이저 시술, 후 관리를 안 한다면..?! - 【피어봄 시술 후 꿀팁💓】</p></div>

   </li>

  </ul>

 </div>

 <!--//2피부관리-->

 <!--3스킨부스터-->

 <div class="playlist mCustomScrollbar" id="list3">

  <ul>

   <li dataUrl="t7w3qUeNmko" class="on">

    <img src="https://img.youtube.com/vi/t7w3qUeNmko/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>피부관리방법 알고 싶어요! 건조한 피부, 잡티, 홍조, 흉터 물러가라! 【피어봄】에서 알려드립니다!!</p></div>

   </li>

   <li dataUrl="rgo84SVdUjU">

    <img src="https://img.youtube.com/vi/rgo84SVdUjU/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>스킨부스터효과, 도대체 뭐길래 인기가 많아?! 【송도 피어봄】이 딱 알려DREAM!!</p></div>

   </li>

   <li dataUrl="AHUsX7ELWA8">

    <img src="https://img.youtube.com/vi/AHUsX7ELWA8/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>건조한 피부를 위한 샤넬주사/큐티셀!! - 【피어봄】의 스킨부스터, 성분도 확인하세요!</p></div>

   </li>

  </ul>

 </div>

 <!--//3스킨부스터-->

 <!--4피어봄소개-->

 <div class="playlist mCustomScrollbar" id="list4">

  <ul>

    <li dataUrl="l47AuHOKhtY" class="on">

    <img src="https://img.youtube.com/vi/l47AuHOKhtY/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>[피어봄] 원장님들의 대한임상미용의학회 강의 및 시술법 이원생중계 !</p></div>

   </li>

   <li dataUrl="aAFg_GIIfKc">

    <img src="https://img.youtube.com/vi/aAFg_GIIfKc/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>송도피부관리 어디가 좋을까? 나, 【피어봄】 다녀!</p></div>

   </li>

   <li dataUrl="AUkutIKO5i0">

    <img src="https://img.youtube.com/vi/AUkutIKO5i0/mqdefault.jpg" alt="" />

    <div class="list_txt"><p>★효과만점 인기시술 BEST TOP3!★ 주름필러/슈링크/커스텀스킨솔루션까지! 【피어봄】에서 만나요!</p></div>

   </li>

  </ul>

 </div>

 <!--//4피어봄소개-->

 <!--//플레이리스트-->

<div style="display:block;clear:both;"></div>

</section>

<style type="text/css">

.pc_view{display:block;}

.mo_view{display:none;}

span.br{display:inline-block;}

#tab_video_wrap{width:1200px;margin:0 auto;position:relative;margin-top:60px;margin-bottom:140px;font-family:'NanumSquare','Nanum Gothic', sans-serif !important;}

#tab_video_wrap h2{font-weight:400;color:#111;}

.gallery_tab{width:100%;margin:0 auto;position:relative;z-index:999;margin-top:70px;}

.gallery_tab ul{text-align:center;font-size:0;margin-bottom:0;display:inline-block;margin:0;padding:0;}

.gallery_tab li{display:inline-block;padding:0 57px;font-size:20px;box-sizing:border-box;font-weight:600;border-right:1px solid #999;cursor:pointer;letter-spacing:-1px;line-height:1;

/*-webkit-padding-end:24.81px;

-webkit-padding-start:24.81px;*/

}

.gallery_tab li:first-child{border-left:1px solid #999;}

.gallery_tab .link{text-align:center;box-sizing:border-box;position:absolute;top:-12px;right:0;}

.gallery_tab .link a{display:block;}

.gallery_tab .link img{vertical-align:middle;}

.video_player{width:800px;display:inline-block;margin-right:15px;margin-top:23px;}

.video_player div{position:relative;width:100%;padding-bottom:56.25%;}

.video_player iframe{position:absolute;left:0;top:0;width:100%;height:100%;}

.playlist{width:390px;height:450px;display:none;visibility:hidden;position:absolute;right:0;top:0;margin-top:47px;border:1px solid #ccc;padding:20px;box-sizing:border-box;padding-right:5px;}

.playlist.visible{visibility:visible;display:block;}

.playlist ul{padding:0;}

.playlist li{margin-top:30px;position:relative;list-style:none;}

.playlist li:first-child{margin-top:0px;}

.playlist li::before{position:absolute;content:"";top:-15px;left:0;width:96%;height:1px;background:#ccc;}

.playlist li:first-child::before{display:none;}

.playlist li.on::after{content:"";position:absolute;left:0;top:0;width:130px;height:100%;border:5px solid #0B432E;box-sizing:border-box;}

.playlist img{width:130px;}

.playlist .list_txt{display:inline-block;width:185px;vertical-align:middle;padding-left:10px;padding-top:11px;box-sizing:border-box;}

.playlist p{text-overflow:ellipsis;overflow:hidden;white-space:normal;line-height:1.6em;height:3.2em;

-webkit-line-clamp: 2;text-align: left;display: -webkit-box;-webkit-box-orient: vertical;font-size:16px;font-weight:700;font-family:'NanumSquare','Nanum Gothic',sans-serif;letter-spacing:-0.5px;word-break:keep-all;}

#tab_video_wrap .mCSB_dragger_bar{width:12px;background:#0B432E;border:0px solid #ccc;box-sizing:border-box;border-radius:10px;}

#tab_video_wrap .mCSB_draggerRail{width:12px;background:#ccc;border-radius:10px;}

#tab_video_wrap .mCSB_buttonUp{background-position:-96.5px 0;}

#tab_video_wrap .mCSB_buttonDown{background-position:-96px -20px;}

@media screen and (max-width: 1200px){

.pc_view{display:none;}

.mo_view{display:block;}

span.br{display:block;}

#tab_video_wrap{width:94%;margin:0 auto;margin-top:0px;margin-bottom:15%;}

#tab_video_wrap h2{font-size:36px;margin:15% 0 5%;}

.gallery_tab{width:100%;margin:0 auto;position:relative;z-index:999;margin-top:0px;}

.gallery_tab ul{text-align:center;font-size:0;margin-bottom:0;display:inline-block;width:100%;}

.gallery_tab li{width:49%;border:1px solid #ccc;margin:0.5% 0.5%;height:38px;line-height:38px;box-sizing:border-box;font-size:15px;padding:0;}

.gallery_tab li:first-child{border-left:1px solid #ccc;}

#tab5{width:99%;}

.gallery_tab .link{width:100%;border:0px solid #FC0017;height:auto;margin-left:0;position:relative;top:0px;}

.video_player{width:100%;display:block;margin-right:0;margin-top:23px;}

.playlist{width:100%;height:260px;position:relative;visibility:hidden;padding:3%;padding-right:2%;margin-top:2%;}

.playlist.visible{visibility:visible;}

.playlist img{width:44%;}

.playlist .list_txt{display:inline-block;width:54%;vertical-align:middle;padding-left:10px;box-sizing:border-box;padding-top:4%;}

.playlist p{font-size:14px;}

.playlist li.on::after{border:5px solid #0B432E;;width:44%;}

}

</style>

<script type="text/javascript">

$('.playlist li').click(function(){

 var dataUrl = $(this).attr('dataUrl');

 $('.video_player iframe').attr('src',"https://www.youtube.com/embed/" + dataUrl + "?rel=0");

 $('.playlist li').removeClass('on');

 $(this).addClass('on');

});

$('#tab1').click(function(){

 var dataFirstUrl = $('#list1 li').first().attr('dataUrl');

 $('.playlist').removeClass('visible');

 $('#list1').addClass('visible');

 $('.video_player iframe').attr('src',"https://www.youtube.com/embed/" + dataFirstUrl + "?rel=0");

 $('#list1 li').first().addClass('on');

});

$('#tab2').click(function(){

 var dataFirstUrl = $('#list2 li').first().attr('dataUrl');

 $('.playlist').removeClass('visible');

 $('#list2').addClass('visible');

 $('.video_player iframe').attr('src',"https://www.youtube.com/embed/" + dataFirstUrl + "?rel=0");

 $('#list2 li').first().addClass('on');

});

$('#tab3').click(function(){

 var dataFirstUrl = $('#list3 li').first().attr('dataUrl');

 $('.playlist').removeClass('visible');

 $('#list3').addClass('visible');

 $('.video_player iframe').attr('src',"https://www.youtube.com/embed/" + dataFirstUrl + "?rel=0");

 $('#list3 li').first().addClass('on');

});

$('#tab4').click(function(){

 var dataFirstUrl = $('#list4 li').first().attr('dataUrl');

 $('.playlist').removeClass('visible');

 $('#list4').addClass('visible');

 $('.video_player iframe').attr('src',"https://www.youtube.com/embed/" + dataFirstUrl + "?rel=0");

 $('#list4 li').first().addClass('on');

});

</script>

<!--//영상탭-->

0 0
다음지도 위에 상세 설명 넣는 코드 플로팅배너_대미회로고
목록 글쓰기

2022 학술행사 일정안내

1월2월3월4월


제 40회 스마트아카데미_영남지회
2월 26일 
맑고고운 부산점



제 41회 스마트아카데미
여드름, 쁘띠 기초 라이브 강의
4월 10일 
닥터쁘띠 강남역점

5월6월
7월
8월

제 42회 스마트아카데미
필러, 실리프팅 심화
5월 1일 
닥터쁘띠 강남점

제 13회 춘계학술대회
 6월 12일 
SC컨벤션 센터



9월10월11월12월

제 43회 스마트아카데미
쁘띠, 리프팅 9월4일
제 44회 스마트아카데미
카데바 세미나 9월25일 


제 2회 대미회 자선 골프대회 
10월16일
제 45회 스마트아카데미
피부, 레이저
쁘띠, 리프팅 10월23일
1023		제14회 추계학술대회
11월 20일
SC컨벤션 센터
제 46회 스마트아카데미
쁘띠, 리프팅


궁금한 것이 있나요?

color: rgba(0,0,0,0.7); cursor: pointer; padding: 15px 20px; border-radius: 100%; }