Tukukkk

I am looking for a solution to get a transparent poster image for html5 video.

I have a page with a background picture over the full width of the page (e.g. 1920x600). I would like to only show the video play button in the middle of this background picture. Video and background picture have different aspect ratios. After pressing the play button the video should be displayed over the background picture in the correct aspect ratio.

As html5 video player I use Plyr.

This is the actual implementation for the player:

   <style>

        .container_plyr_teaser {

        padding: 16px 0px 0px 0px;

        max-width: 1000px;

        margin: auto;

        }       

        .plyr {

        border-radius: 15px;

        }

        .plyr--stopped .plyr__controls {

        opacity: 0;

        pointer-events: none;

        }

    </style>



    <div class="container_plyr_teaser">

        <video class="js-player" controls playsinline preload="none" id="player11" data-plyr-config='{"volume": 0.3, "resetOnEnd": true, "enabled": true, "storage": { "enabled": false }, "quality": { "default": 720 } }'>

        <source src="wolken_360p.mp4" type="video/mp4" size="360">  

        <source src="wolken_720p.mp4" type="video/mp4" size="720">

        <source src="wolken_1080p.mp4" type="video/mp4" size="1080">

        </video>

     </div>

My first idea, using a transparent poster image poster="Wolken_Poster_transparent_16x9.png" results in a black video player.

Using a transparent poster image results in a black video player

My second idea was to use an exact cutout of the background picture as video poster image. This looks as desired, but only for the exact resolution.

exact cutout of the background picture as video poster

With a wrong resolution of the browser window you will get an unattractive overlap between video poster image and background image.

unattractive overlap

An ideas for another solution?

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>