iFrame around video - video embed error (own hosting)

Question

Maybe someone with more experience in WP / html can help me out here:

I want to place an absolutely positioned frame (http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png) around a video I have uploaded onto our Wordpress hosting site (random example --> http://fursttedesco.com/wp-content/uploads/2021/02/video.mp4). I have found a code online that works, but only with the original example video, not when I try to exchange the URL using the above video.

HTML

<div id="laptop-panel">
            <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
        </div>

CSS

  #laptop-panel {
            position: relative;
            padding-bottom: 64.5%;
        }
    
    #laptop-panel iframe {
            box-sizing: border-box;
            background: url(http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png) center center no-repeat;
            background-size: contain;
            padding: 14.7% 12.9% 15%;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

Does anybody know what could be wrong? Is it that the path for the video is wrong or maybe it doesn't work with .mp4s?

Many thanks for your help!

Answer 1

An iframe is a HTML element that allows an external webpage to be embedded in an HTML document. Learn more about it here. You cannot just give to it a video file.

Instead of an iframe tag, you should use video html5 tag and do something like that :

<div id="laptop-panel">
    <video autoplay>
        <source src="http://fursttedesco.com/wp-content/uploads/2021/02/video.mp4" type="video/mp4">
    </video>
</div>

<style>
    #laptop-panel {
        position: relative;
        padding-bottom: 64.5%;
    }

    #laptop-panel video {
        box-sizing: border-box;
        background: url(http://fursttedesco.com/wp-content/uploads/2021/02/frame-empty.png) center center no-repeat;
        background-size: contain;
        object-fit: cover;
        padding: 14.7% 12.9% 15%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

Notice the new object-fit: cover; css rule : it's here to make your video covering the whole video container. You can learn more about it here