Embed video in an image in responsive html5

Asked Sep 28 '15 at 12:20

Active Sep 28 '15 at 12:51

Viewed 1,031 times

I'm trying to embed a video inside an image, the challenge is that the page is responsive. The video looks in place on full screen, however it moves out of the box when resolution changes.

So I want the video to be inside the image frame at all sizes. Should I use @media or is there another way?

<div class="col-md-4">
    <img class="img-responsive" style="width:344px;height:780px"
        src="Images/mywork-images/cicis/cicis-mobile.jpg">
    <div class="player">
        <iframe src="https://player.vimeo.com/video/139805324"
            width="290" height="290" frameborder="0"
            webkitallowfullscreen mozallowfullscreen
            allowfullscreen></iframe>
    </div> 
</div>

.player{
    position: relative;
    height: 0;
    bottom: 565px;
    left: 21.3%; /* 110px */
}

edited Sep 28 '15 at 12:39

spenibus

4,339
11
26
35

asked Sep 28 '15 at 12:20

MuaathAli

@imGaurav Can you give an example on how to embed a YouTube or Vimeo video using the HTML5 video tag? – GolezTrol Sep 28 '15 at 12:28
http://stackoverflow.com/questions/5157377/show-youtube-video-source-into-html5-video-tag – kakajan Sep 28 '15 at 12:35
don't forget to close your tag – kakajan Sep 28 '15 at 12:36
@kakajan `img` tags don't need closing in HTML5. – Turnip Sep 28 '15 at 12:48
Could you clarify a bit the question: what box should the video go in? how does changing resolution/window size affect the video? – Alvaro Montoro Sep 28 '15 at 14:04
@AlvaroMontoro I can't upload images sorry. I have an iphone image and I want to play an Instagram video inside the iphone frame. The page is responsive so if I reduce the size of the page or view it on mobile, the video doesn't stay in the specific area. Is there a way to show you images? – MuaathAli Sep 28 '15 at 14:12
Upload them to imgur, share the links here, and I'll update the question to add the images – Alvaro Montoro Sep 28 '15 at 14:53
@SexyTurnip don't know, thanks for info – kakajan Sep 28 '15 at 16:04
@MuaathAli, did you try to use html5 responsive video players like [flowplayer](https://flowplayer.org), etc... – kakajan Sep 28 '15 at 16:08
@AlvaroMontoro HYG http://imgur.com/a/G5meV – MuaathAli Sep 29 '15 at 06:51
ok guys thanks for you help. I found a solution, the parent div should have a position relative and the child div should have a position absolute. – MuaathAli Sep 29 '15 at 08:03

Embed video in an image in responsive html5

0 Answers0