gmocamilotd
12/16/2017 - 10:31 PM

make a video as a background, responsive

What ever your reasons in wanting to do this, the HTML and CSS is fairly simply and can be fairly responsive when needed. However on most mobile and hand-held platforms the auto-play is disabled, so the video will remain "paused" at the beginning when the document is loaded. The only work around I've found is to use Java and force the video to play after a user interaction.

You'll need 3 DIVs as shown in the diagram below.

1st DIV "videoDiv" is a container which will hold the the display and set the height as required. 2nd DIV "videoBlock" contains the video and is placed using an absolute position on top and left. 3rd DIV "videoMessage" will display all the foreground content such as text and images. This is also placed with an absolute position in the 1st Div, we change the z-index of this 3rd DIV so it is placed "on top" of the 2nd DIV.

You can style the text as you want, place images, dynamic data or whatever you need in the 3rd DIV.

As far as I know background videos with autoplay will not work on most mobiles. The user is required a manual start the playback. This means you'll have to display the HTML5 video control buttons. The work-around is to replace the the video with a fixed image. We can do this using a media query for small screen sizes and hiding the video layer to display a static alternative image.

#polina button {
    display: block;
    width: 30%;
    margin-left: 60%;
    padding: .4rem;
    border: none;

    font-size: 1.3rem;
    background: rgba(255,255,255,0.23);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: .3s background;
}
#polina button:hover {
    background: rgba(0,0,0,0.5);
}

<div id="videoDiv">
    <div id="videoBlock">
        <img src="img/video/bullicio.jpg" id="videosubstitute" alt="">
        <video preload="preload" id="videobject" playsinline autoplay muted loop>
            <source src="img/video/bullicio.webm" type="video/webm"/>
            <source src="img/video/bullicio.mp4" type="video/mp4"/>
        </video>
        <div id="videoMessage">
            <div id="polina" >
                <p>En el bullicio del día a día...</p>
                <p class="textoingles">In the bustle of day to day...</p>
                <p>&nbsp;</p>
                <h1>...hay un rinconcito en Lima para ti.</h1>
                <h2 class="textoingles">(...there is a corner in Lima for you.)</h2>
                <button>pausa <span class="textoingles">(pause)</span></button>
            </div>
        </div>
    </div>
</div>


<script>
    var vid = document.getElementById("videobject");
    var pauseButton = document.querySelector("#polina button");

    if (window.matchMedia('(prefers-reduced-motion)').matches) {
        vid.removeAttribute("autoplay");
        vid.pause();
        pauseButton.innerHTML = "En pausa/ Paused";
    }

    function vidFade() {
        vid.classList.add("stopfade");
    }

    vid.addEventListener('ended', function()
    {
// only functional if "loop" is removed
        vid.pause();
// to capture IE10
        vidFade();
    });


    pauseButton.addEventListener("click", function() {
        vid.classList.toggle("stopfade");
        if (vid.paused) {
            vid.play();
            pauseButton.innerHTML = "Pausa/ Pause";
        } else {
            vid.pause();
            pauseButton.innerHTML = "En pausa/ Paused";
        }
    })


</script>
#videoDiv {width: 100%; height: 360px; position: relative;}
#videoBlock {width: 100%; height: 100%;  display: flex;  justify-content: center; align-items: center;}
#videoMessage {width: 100%; height:100%; position: absolute; top: 0; left: 0;}
#videoMessage *{padding:0.4em; margin:0}
#videoMessage {text-shadow: 2px 2px 2px #000000; color:white;z-index:99 }
#videoMessage h1{font-size: 2em;color:#ffffff;text-align:center;}
#videoMessage h2{font-size: 1.5em;color:#ffffff;text-align:center;}
#videoMessage h3{font-size: 1.2em;color:#ffffff;text-align:center;}
.videoClick {text-align:center}
.videoClick a{color:white;background-color:rgba(241, 241, 241, 0.25);font-size: 1.7em;cursor:pointer;cursor:hand}

/* Default hide the video on all devices */
#video{display:none}

/* Default display the image to replace the video on all devices */
#videosubstitute{display:block; width:100%;height:auto}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}

source

mas adelante se muestra una variacion donde el control contiene un boton para poner pausa al video

(en el css falta todavia dar formato para centrar el contenido)

<div id="videoDiv"> 
<div id="videoBlock"> 
<img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="">
<video preload="preload" id="video" autoplay="autoplay" loop="loop">
<source src="/video/t12.webm" type="video/webm"></source>
<source src="/video/t12.mp4" type="video/mp4"></source>
</video> 
<div id="videoMessage">
<h1>Hire us</h1>
<h2>..we're available for</h2>
<h3>HTML projects</h3>
<p class="videoClick" >
<a href="//github.com/phillipaldridge/nevermind">Click for more CSS</a>
</p> 
</div>
</div>
</div>