유튜브 api iframe embed 최적화 질문드립니다!

Question

안녕하세요.웹페이지 프론트 작업중인데요리스트에 마우스를 오버하면 커서를 따라다니는 툴팁이 노출되는 기능이 있습니다.해당 툴팁에는 이미지나 동영상 파일이 아닌 iframe에 유튜브 동영상 아이디를 따와서 각 리스트에 마우스 오버시 해당 리스트에 맞는 동영상 아이디를 바인딩해서 재생되게 하는 기능인데요(예시를 들기위해 https://florentbiffi.com/ 해당 사이트 중간쯤에 project 보시면 마우스 오버하면 나오는 이미지 툴팁이 저의 경우엔 iframe을 통한 유튜브 동영상 툴팁입니다.) 이슈는 각 리스트에 마우스를 오버할때마다 바인딩되는 동영상 아이디가 변경돼서 다른 동영상이 재생되다보니 리스트1 > 리스트2로 마우스를 옮길때마다 계속 유튜브 api 호출이됩니다. 그래서 버벅이구요.이 부분은 확신 할 수 있는게 우선 리스트(아코디언 리스트임)랑 클릭해서 상세내용이 드롭다운 됐을때 나오는 콘텐츠에 들어가있는 swiper slide들도 같이 일정부분 스크롤 될때마다 돔에 그릴수있게 lazy-loading 처리 해놨고 iframe태그는 그대로 두고 src만 바인딩 시켜주는 부분만 주석처리 해보니까 쾌적하더라구요..ㅋㅋㅋ 하지만, 클라이언트는 버벅이는거 어떻게 안되냐 그러시는데 제 짧은 경험으로는 도저히 방법을 모르겠어서 질문 드립니다.api자체를 최적화해서 호출하는 방법은 없을거같고... 저는 gif움짤이나 필요한 부분만 따서 mp4파일 만들고, 압축해서 넣으면 더 쾌적할거같은데.. 그건 또 싫다고 하시니... 어떻게 해야할까요?? 아래는 소스 부분입니다.if (!platformCheck()) return; const embedUrl = data.map(d => d.url); const tooltipBox = document.querySelector(".tooltip_box"); const iframe = document.createElement("iframe"); const hoverBox = document.querySelectorAll(".work_list .list button"); iframe.setAttribute("class", "video_tooltip"); iframe.setAttribute("name", "work"); iframe.setAttribute("frameborder", "0"); iframe.width = "560"; iframe.height = "315"; tooltipBox.appendChild(iframe); hoverBox.forEach((obj, i) => { obj.addEventListener("mouseenter", function(e) { const tl = gsap.timeline(); tl .to(".cursor", { duration: 0.1, scale: 1.8, mixBlendMode: "difference", }) .to(this, { duration: 0.3, letterSpacing: "3px", }, "<") .to(tooltipBox, { duration: 0.3, opacity: 1, display: "block", }, "<"); // 아래 부분이 동영상 id iframe.src = `https://www.youtube.com/embed/${embedUrl[i]}?rel=0&autoplay=1&mute=1&controls=0&enablejsapi=1&fs=0&modestbranding=1&playsinline=1&color=white"`; e.stopImmediatePropagation(); }); obj.addEventListener("mouseleave", function(e) { const tl = gsap.timeline(); tl .to(".cursor", { duration: 0.1, scale: 1, mixBlendMode: "normal", }) .to(this, { duration: 0.3, "letter-spacing": "0", }, "<") .to(tooltipBox, { duration: 0.3, opacity: 0, display: "none", }, "<"); e.stopImmediatePropagation(); }); obj.addEventListener("mousemove", (e) => { const mouseX = e.clientX; const mouseY = e.clientY; tooltipBox.style.left = mouseX + "px"; tooltipBox.style.top = mouseY - tooltipBox.clientHeight + "px"; if (tooltipBox.offsetTop < 0) tooltipBox.style.top = mouseY + "px"; }); }); 감사합니다.

유튜브 api iframe embed 최적화 질문드립니다!

0개의 답변

Q&A 목록