How to Have a Video with Transparent Background Using HTML5 Video Tag

Can I have a mp4 video with transparent background using HTML5 video tag?

I got the solution, we need to run this html in localhost or on server.

How to make a html5 video poster image transparent to see the background image while video is not playing

My solution looks like the following:

<!-- generate an extra button to start the video -->    
<button id="button_teaser" onclick="playPause()">Play</button>

<video class="js-player" poster="poster.jpg" controls playsinline preload="none" id="video_teaser" data-plyr-config='{"volume": 0.3, "resetOnEnd": true, "enabled": true, "storage": { "enabled": false }, "quality": { "default": 720 } }'>
    <source src="video_360p.mp4" type="video/mp4" size="360">   
    <source src="video_720p.mp4" type="video/mp4" size="720">
    <source src="video_1080p.mp4" type="video/mp4" size="1080">
</video>

<!-- hide video -->
<script>
    $('#video_teaser').hide();
</script>

<!-- after clicking the generated play button, hide play button and show video -->
<script>
$(document).ready(function(){
    $('#button_teaser').click(function(){
        $('#video_teaser').show();
        $('#button_teaser').hide();
        $('#video_teaser').get(0).play();
    });
});
</script>

<!-- after playing video automatically hide video and show play button again -->
<script>
$(document).ready(function(){
    $('#video_teaser').on('ended',function(){
    $('#video_teaser').hide();
    $('#button_teaser').show();
    });
});
</script>

Overlaying a transparent background on an embedded video

Here is a fiddle

I used green overlay for the demo.

CSS

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    //padding: 20px;
    border-radius: 5px;
    background-attachment: scroll;
    overflow: hidden;
}
.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: 1;
}
.videoContainer .overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: green;
    opacity: 0.5;
}

---

Related Topics