0

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

stighy
  • 7,260
  • 25
  • 97
  • 157
  • Does this answer your question? [Embed HTML5 YouTube video without iframe?](https://stackoverflow.com/questions/18726480/embed-html5-youtube-video-without-iframe). Doesn't necessarily have to be a YouTube video, the answers here can be adapted to local files too – nopassport1 Jan 31 '20 at 10:11
  • My question isn't "how to embed youtube video without iframe", but How to show a background image (a monitor) and a video on it – stighy Jan 31 '20 at 11:15
  • `How can I do without iframe ?` Without any further context in the body of your question, it was assumed that you have a working solution, except you were looking for a way to embed a video without using an `iframe`. In which case, the body of your question doesn't reflect what you're trying to achieve. I suggest updating the details of your question to get an accurate answer – nopassport1 Jan 31 '20 at 11:27

1 Answers1

1

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

tonygatta
  • 71
  • 9