/* YouTube 전체 너비 임베드 - 반응형 래퍼 기본 스타일 */ .ytfw-wrapper { position: relative; width: 100%; height: 0; overflow: hidden; margin: 1.5em auto; background: #000; } .ytfw-wrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } /* 테마 본문 컨테이너의 좌우 여백/최대너비를 뚫고 브라우저 전체 폭으로 채우는 기법 */ .ytfw-wrapper.ytfw-fullbleed { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* ===== 히어로 배너 모드 ([ytfw_hero]) ===== */ /* * JS(hero.js)가 이 요소를 바로 아래로 옮기고(relocateToBody), 실제 화면 * 좌표를 측정해서 폭을 맞춘다(fixWidth). 테마 컨테이너의 overflow/max-width/position * 제약을 근본적으로 피하기 위함이다. 여기서는 JS가 적용되기 전까지의 안전한 * 기본값만 지정한다. */ .ytfw-hero-wrap { position: relative; width: 100%; overflow: hidden; background: #000; } .ytfw-hero-inner { position: relative; width: 100%; height: 100%; overflow: hidden; } /* 클릭 전 썸네일: background-size:cover로 검은 여백 없이 영역을 꽉 채운다 */ .ytfw-hero-facade { position: absolute; inset: 0; background-size: cover; background-position: center; cursor: pointer; } .ytfw-hero-play { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.55); border-radius: 50%; z-index: 2; transition: background 0.15s ease; } .ytfw-hero-facade:hover .ytfw-hero-play { background: rgba(255, 0, 0, 0.85); } .ytfw-hero-play::after { content: ""; position: absolute; top: 50%; left: 56%; width: 0; height: 0; transform: translate(-50%, -50%); border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent #fff; } /* 헤더 텍스트 가독성을 위한 상단 그라데이션(선택) */ .ytfw-hero-gradient::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 220px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); pointer-events: none; z-index: 2; } /* 실제 재생 영상: JS가 컨테이너를 꽉 채우도록(크롭) 크기를 계산해서 넣어준다 */ .ytfw-hero-iframe-wrap { position: absolute; inset: 0; } .ytfw-hero-iframe-wrap iframe { position: absolute; border: 0; } /* 헤더를 영상 위에 투명하게 띄우는 클래스 (JS가 헤더 요소에 자동으로 부착) */ .ytfw-header-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; background: transparent !important; box-shadow: none !important; } /* 로그인 상태에서 워드프레스 상단 관리자 바(어드민 바)와 겹치지 않도록 보정 */ body.admin-bar .ytfw-header-overlay { top: 32px !important; } @media screen and (max-width: 782px) { body.admin-bar .ytfw-header-overlay { top: 46px !important; } }