How to play video on image?

Question

I have following Image :

Now I want to place a vimeo video on this image with responsive view :

To do that I am using following css and html code :

html code :

<div class="vimeo">
<article>
    <figure>
        <iframe src="https://player.vimeo.com/video/211148482?autoplay=1&title=0&byline=0&portrait=0" width="568" height="453" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>       
    </figure>        
</article>
</div>

CSS code :

.vimeo { 
    font: 16px/1.4 Georgia, Serif;
    width: 45%; 
    margin: 1px auto;   
    background: url(images/bg.jpg); 
    background-size: contain;
    background-repeat: no-repeat;   
    position: relative;
}

pre, article style, article script { 
    white-space: pre; 
    display: block;         
    overflow-x: auto; 

}

img { 
    max-width: 100%;
}
figure { 
    display: block; 
}
figcaption { 
    display: block; text-align: center; orphans: 2;
}

Now it looks like this image :

I want to set it on the image gray background, How can I do this ?

http://stackoverflow.com/questions/10881678/html-play-a-video-inside-an-image — Sachith Wickramaarachchi, Apr 02 '17 at 08:51
Possible duplicate of [HTML : play a video inside an image](http://stackoverflow.com/questions/10881678/html-play-a-video-inside-an-image) — Rob, Apr 02 '17 at 11:29

score 1 · Answer 1 · answered Apr 02 '17 at 08:56

Check the code, need some fine-tuning though.

$(function() {

    var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");

 $allVideos.each(function() {

   $(this)
     // jQuery .data does not work on object/embed elements
     .attr('data-aspectRatio', this.height / this.width)
     .removeAttr('height')
     .removeAttr('width');

 });

 $(window).resize(function() {

   var newWidth = $fluidEl.width();
   $allVideos.each(function() {

     var $el = $(this);
     $el
         .width(newWidth)
         .height(newWidth * $el.attr('data-aspectRatio'));

   });

 }).resize();

});

figure {
    display: block;
    background: url(https://i.stack.imgur.com/JQiLu.jpg); 
    background-size: contain;
    background-repeat: no-repeat;  
    padding: 7%;
}

figcaption {
  position: relative;
  top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure>
  <iframe src="//player.vimeo.com/video/211148482?autoplay=0&title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
  <figcaption>Caption</figcaption>
 </figure>

Kudos to https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

wow, greate it's working but why there is a black background between left and right of the video ? — Shibbir, Apr 02 '17 at 09:07
Well, it's a background of the video itself. You have to set up initial sizes of video frame, then it will keep that ratio. I.e. make initial width smaller and increase left-right padding. — faster, Apr 02 '17 at 09:24

Jegger · Answer 2 · 2017-04-02T11:29:39.503

You can avoid to use javascript but only css.

Instead of the grey color, you can set a transparent color and use the png image format. You need of css declaration background-color: transparent to see the video above a transparent color. Moreover, you need of css declaration position: absolute to overlap both image and video.

Please see also the snippet. (note that you can improve the png image)

I hope I was of any help.

<div style="position: absolute; width: 882px; height: 590px;">
<img style="position: absolute; background-color: transparent; width: 100%; height: 100%;" src="https://i.stack.imgur.com/GsgXg.png">
<iframe src="https://player.vimeo.com/video/211148482?autoplay=1&title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

How to play video on image?

2 Answers2