6월22일26일차 - 반응형 Youtube, Kakaomap, YTPlaer zoom btn

youtube영상을 반응형으로 화면 크기에 맞추어 변하도록 하는 방법을 익힙니다.

같은 원리로 Kakaomap을 삽입할 수 있습니다.

[220622 반응형 youtube, Kakaomap, YTPlayer] [ 220622 html / css / js ]

YTPlayer 를 활용하여 background에 동영상을 넣고 전체화면 버튼을 만듭니다. 

---

유튜브 동영상을 반응형으로 만드는 방법입니다.
iframe에 원하는 youtube 소스코드를 복사하고 붙여넣습니다.
<iframe width="424" height="238" src="https://www.youtube.com/embed/21ZNI_fYw0s" title="utb - Chantiers d'avenir - Rosny-sous-bois" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
position을 잡고 padding-bottom: 56.25%를 줍니다. (9를 16으로 나눈 값은 0.5625입니다.)
      .inner {
        position: relative;
        padding-bottom: 56.25%;
      }
      .inner iframe {
        position: absolute;
        inset: 0 0 0 0;
      }

 

 

 

 

kakao map을 넣는 방법입니다.
kakao map에서 표시를 원하는 장소를 선택하고 html보기 > 소스 생성하기 > 복사 > 붙여넣기

<div id="daumRoughmapContainer1655857917626" class="root_daum_roughmap root_daum_roughmap_landing"></div>

<script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>

<script charset=UTF-8">
new daum.roughmap.Lander({
    "timestamp" : "1655857917626",
    "key" : "2ap3t",
    "mapWidth" : "640",
    "mapHeight" : "360"
}).render();

</script>

 

map의 class를 가져와 width와 height를 조절합니다.
!important 속성을 적용할 필요가 없다고도 합니다.
      .inner {
        position: relative;
        padding-bottom: 56.25%;
        border-bottom: 2px solid #ddd;
      }
      .root_daum_roughmap {
        position: absolute !important;
        inset: 0 0 0 0;
        width: 100% !important;
        height: 100% !important;
      }
.wrap_map을 100%로 하지 않고 96.5%로 설정하면 kakaomap 로드뷰, 길찾기, 지도 크게 보기 기능을 표시합니다.
      .root_daum_roughmap .wrap_map {
        height: 96.5% !important;
      }
      

      
      
YTPlayer를 이용하여 유튜브 영상을 background로 넣는 방법입니다.
사용설명에 따라 아래의 div를 복사하여 붙여넣습니다.
<div id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</div>

id를 원하는 이름으로 바꾸고, property는 가독성을 위해서 html이 아닌 js에 적용합니다.
        <section class="utb">
          <a class="zoom" href="">Zoom <i class="xi-expand-square zoom"></i></a>
          <div id="utb" class="player"></div>
        </section>
        
youtube 동영상의 주소를 입력합니다.
containment 로 동영상을 담을 box를 지정할 수 있습니다.
showControls: false, 로 컨트롤러를 보이지 않도록 합니다.
playOnlyIfVisible: true, 화면에 들어왔을 때만 재생되도록 합니다.
    $("#utb").YTPlayer({
    videoURL: "https://youtu.be/dS9x5Ws67wI",
    containment: ".utb",
    autoPlay: true,
    mute: true,
    startAt: 0,
    opacity: 1,
    showControls: false,
    playOnlyIfVisible: true,
  });
전체화면 버튼을 적용하려면 .YTPFullscreen() 속성을 만든 버튼에 적용하면 됩니다.
  $(".utb .zoom").on("click", function (e) {
    e.preventDefault();
    $("#utb").YTPFullscreen();
  });