CODEWITHSUNDEEP
htmlcss
stighy
stighy

Reputation: 7170

How to place a video (using html5 video tag) with a background monitor image?

I'm trying to reproduce this html result:

enter image description here

An image of a monitor, and a video on it ...

At the moment i've found a solution based on an iFrame and youtube url, but i want to reproduce a video hosted on my space, using html5 video tag.

Iframe solution is: 

CSS:

/* Background monitor Apple */
        div.desktop-wrapper {
            position: relative;
            padding-top: 25px;
            padding-bottom: 67.5%;
            height: 0;
        }
        div.desktop-wrapper iframe {
            box-sizing: border-box;
            background: url(http://img01.deviantart.net/05b6/i/2011/030/8/5/apple_led_cinema_screen_by_fisshy94-d38e3o5.png) center center no-repeat;
            background-size: contain;
            padding: 3.4% 10.8% 18.6%;/* 11.9% 15.5% 14.8% */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

and html: 

<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0"width="600" height="339" type="text/html" src="/videos/Paris-01.mp4"><div><small></small></div></iframe>

How can I do without iframe ?

Thanks

Upvotes: 0

Views: 460

Answers (1)

tonygatta
tonygatta

Reputation: 71

Try this:

<div class="desktop-wrapper">
  <div class="video">
    <video controls>
      <source src="mov_bbb.mp4" type="video/mp4" />
      <source src="mov_bbb.ogg" type="video/ogg" />
      Your browser does not support HTML5 video.
    </video>
  </div>
</div>

https://codepen.io/agemini/pen/abzgYNz

You need to adjust the padding of the .video tag for better centering/size

Upvotes: 1

Related Questions