프론트엔드 개발 찔찔이

토글버튼으로 mute/unmute 제어하기유튜브 플레이어 API 공식문서🔈youtubePlayer01.unMute(); // 음소거 해제youtubePlayer01.mute(); // 음소거youtubePlayer01.isMute(); // 음소거 상태 확인(boolean타입)* isMute()는 사용시 오류가 있어서 사용하지 않고, 전역 변수를 만들어서 관리했다. 초기 세팅 var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; ..

스크롤하다가 유튜브가 뷰포트에 들어오면 재생하는 함수 만들기 아래 유튜브 API에서 제공하는 메소드를 이용해서 재생을 제어한다. 유튜브 플레이어 API 공식문서youtubePlayer01.playVideo() //재생youtubePlayer01.pauseVideo() //정지youtubePlayer01.seekTo(8); // 8초부터 재생초기 세팅 var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.p..

들어가며쇼핑몰을 보면 마우스를 호버했을 때 옆에 확대된 이미지가 뜨는것을 볼 수 있다.마우스를 움직일때마다 확대된 이미지도 함께 움직이는데, 이 플러그인을 찾기 힘들어서 직접 제이쿼리로 구현해봤다.  script  마우스 호버시 보이는 줌 영역 박스는 기존 이미지와 확대 이미지의 비례하여 넓이와 높이값이 정해지도록 했다.이렇게 진행하면 이미지의 크기가 바뀌어도 저절로 영역 크기를 잡아줄 수 있다. 만약 줌 영역 박스를 직접 조절하고 싶다면 /* 줌 영역 박스 크기 지정 */ 부분을 삭제하면 된다. CSS  HTML