편집 요약 없음 |
편집 요약 없음 |
||
| 5번째 줄: | 5번째 줄: | ||
<div id="text"><span id="yeah">사랑을<br>전하고<br>싶다든가</span></div> | <div id="text"><span id="yeah">사랑을<br>전하고<br>싶다든가</span></div> | ||
<style> | <style> | ||
.video-container{ | .video-container { | ||
width: 100vw; | width: 100vw; | ||
height: 100vh; | height: 100vh; | ||
} | } | ||
iframe { | iframe { | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
| 19번째 줄: | 19번째 줄: | ||
} | } | ||
@media (min-aspect-ratio: 16/9) { | @media (min-aspect-ratio: 16/9) { | ||
.video-container iframe { | .video-container iframe { | ||
/* height = 100 * (9 / 16) = 56.25 */ | /* height = 100 * (9 / 16) = 56.25 */ | ||
height: 56.25vw; | height: 56.25vw; | ||
| 26번째 줄: | 26번째 줄: | ||
} | } | ||
@media (max-aspect-ratio: 16/9) { | @media (max-aspect-ratio: 16/9) { | ||
.video-container iframe { | .video-container iframe { | ||
/* width = 100 / (9 / 16) = 177.777777 */ | /* width = 100 / (9 / 16) = 177.777777 */ | ||
width: 177.78vh; | width: 177.78vh; | ||
| 33번째 줄: | 33번째 줄: | ||
} | } | ||
#text{ | #text { | ||
position: absolute; | position: absolute; | ||
color: #FFFFFF; | color: #FFFFFF; | ||
| 40번째 줄: | 40번째 줄: | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
} | } | ||
#yeah{ | #yeah { | ||
font-size: 5.5rem; | font-size: 5.5rem; | ||
font-weight: 900; | font-weight: 900; | ||
line-height: 95%; | line-height: 95%; | ||
} | } | ||
header { display: none; } | |||
</style> | </style> | ||
</html>{{DARKMODE}} | </html> { {DARKMODE}} | ||
2023년 2월 24일 (금) 11:50 판
사랑을
전하고
싶다든가
전하고
싶다든가
{ {DARKMODE}}