Section Vidéo Background

Vidéo hébergée avec un lien ou un fichier vidéo, la vidéo est placé dans un header avec la possibilité de mettre du texte par-dessus la vidéo, du contenu peut être ensuite placé en bas.

CSS

*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100%;
}

header {
    position: relative;
    overflow: hidden;
}
header h1 {
    color: black;
    padding: 12rem 0;
    text-align: center;
}

#header-video {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    z-index: -100;
    background-size: cover;
    background-image: url(https://dl.dropbox.com/s/0x0kvon21aw1q4m/discussing_features.jpg);
}

main {
    min-height: 100%;
}

Html

<header>
    <h1>Video background</h1>
    <video playsinline autoplay muted loop id="header-video" poster="https://dl.dropbox.com/s/0x0kvon21aw1q4m/discussing_features.jpg">
        <source src="https://dl.dropbox.com/s/1ibdufnc582i3m2/discussing_features.webm" type="video/webm">
        <source src="https://dl.dropbox.com/s/o1k71kdq36jgt00/discussing_features.ogv" type="video/ogg">
        <source src="https://dl.dropbox.com/s/84ovrnh706nxnp2/discussing_features.mp4" type="video/mp4">
        <img src="https://dl.dropbox.com/s/0x0kvon21aw1q4m/discussing_features.jpg">
    </video>
</header>
<main>
</main>

Vidéo hébergée avec Youtube, la vidéo est placé dans un header cependant on ne peut pas mettre du texte par-dessus la vidéo, du contenu peut être ensuite placé en bas.

CSS

*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100%;
}

header {
    position: relative;
    overflow: hidden;
}

header {
    padding: 12rem 0;
}

#header-video {
    position: absolute;
    top: 50%;
    left: 50%;
    height: auto;
    width: auto;
    min-height: 100%;
    min-width: 100%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    background-image: url(https://blogs.parisnanterre.fr/archives/humanites/sites/blogshumanites.u-paris10.fr/files/upload/nyan_cat_wallpaper_by_phkoopz-d3dygjm.jpg);
}

main {
    min-height: 100%;
}

Html

<header>
    <iframe allowfullscreen id="header-video" src="https://www.youtube.com/embed/QH2-TGUlwu4?rel=0" width="100%" height="100%" frameborder="0"></iframe>
</header>
<main>
</main>