우리가 사는 세상을 모두 알기엔 인생은 너무 짧다.!!

사이트관리

youtube 동영상을 배경 화면으로

거북선인 2018. 3. 13. 13:26
반응형

youtube 동영상을 배경 화면으로

<! DOCTYPE html>

<html lang = "en">

<head>

    <meta charset = "UTF-8">

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

    <style type = "text / css">

    * {상자 크기 : 테두리 상자; }

    .video-background {

        배경 : # 000;

        위치 : 고정;

        상단 : 0; 오른쪽 : 0; 하단 : 0; 왼쪽 : 0;

        Z- 색인 : -99;

    }

    .video-foreground,

    .video-background iframe {

        위치 : 절대;

        상단 : 0;

        왼쪽 : 0;

        너비 : 100 %;

        높이 : 100 %;

        포인터 이벤트 : 없음;

    }

    @ 미디어 (최소 가로 세로 비율 : 16/9) {

    .video-foreground {높이 : 300 %; 상단 : -100 %; }

    }

    @ 미디어 (최대 가로 세로 비율 : 16/9) {

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

    }

    h1 {color : white;}

    </ style>

    

</ head>

<body>

<div class = "video-background">

    <div class = "video-foreground">

      <iframe src = "https://www.youtube.com/embed/sbc2yBheAbo?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=sbc2yBheAbo"frameborder = "0"allowfullscreen> </ iframe>

    </ div>

  </ div>

<h1> 악동 뮤득 </ h1>

 

 

 

 

 

 

</ body>

</ html>


반응형