Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

유튜브동영상 배경 본문

글로벌IT_2024/K_Digital_2기

유튜브동영상 배경

moozi 2024. 5. 30. 09:49

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>유튜브 동영상 배경</title>

    <style type="text/css">

    * { box-sizing: border-box; }

    .video-background {

        background: #000;

        position: fixed;

        top: 0; right: 0; bottom: 0; left: 0;

        z-index: -99;

    }

    .video-foreground,

    .video-background iframe {

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        pointer-events: none;

    }

    @media (min-aspect-ratio: 16/9) {

    .video-foreground { height: 300%; top: -100%; }

    }

    @media (max-aspect-ratio: 16/9) {

    .video-foreground { width: 300%; left: -100%; }

    }

    h1{ color:white;}

    </style>

   

</head>

<body>

    <div class="video-background">

        <div class="video-foreground">

           

        </div>

    </div>

<h1>U-20 월드컵</h1>













</body>

</html>

'글로벌IT_2024 > K_Digital_2기' 카테고리의 다른 글

html연습문제07  (0) 2024.05.30
5/30 html_workspace.zip  (0) 2024.05.30
html연습문제06  (0) 2024.05.29
html연습문제05  (0) 2024.05.28
brownshadow.zip  (0) 2024.05.28
'글로벌IT_2024/K_Digital_2기' Related Articles more
Comments