|
|
| (같은 사용자의 중간 판 53개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| <html>
| |
| <div class="video-container">
| |
| <iframe src="https://www.youtube.com/embed/9qRCARM_LfE?autoplay=1&mute=0&playsinline=1&playlist=9qRCARM_LfE&loop=1"></iframe>
| |
| </div>
| |
| <div id="text"><span id="yeah">사랑을<br>전하고<br>싶다든가</span></div>
| |
| <style>
| |
| .video-container{
| |
| width: 100vw;
| |
| height: 100vh;
| |
| }
| |
|
| |
| iframe {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| width: 100vw;
| |
| height: 100vh;
| |
| transform: translate(-50%, -50%);
| |
| }
| |
|
| |
|
| @media (min-aspect-ratio: 16/9) {
| |
| .video-container iframe {
| |
| /* height = 100 * (9 / 16) = 56.25 */
| |
| height: 56.25vw;
| |
| }
| |
| }
| |
|
| |
| @media (max-aspect-ratio: 16/9) {
| |
| .video-container iframe {
| |
| /* width = 100 / (9 / 16) = 177.777777 */
| |
| width: 177.78vh;
| |
| }
| |
| }
| |
|
| |
| #text{
| |
| position: absolute;
| |
| color: #FFFFFF;
| |
| left: 50%;
| |
| top: 50%;
| |
| transform: translate(-50%, -50%);
| |
| }
| |
| #yeah{
| |
| font-size: 5.5rem;
| |
| font-weight: 900;
| |
| line-height: 95%;
| |
| }
| |
| </html>{{DARKMODE}}
| |
