9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

how to overlay a video in a picture?

by dawoodkhan97
9 replies
Hi WF Members!
I hate technical stuff and dont have much coding experience
I am trying to find out how to overlay a video in a picture.
I will be using this picture in one of my squeeze pages
with a Macbook.
Like this: Imgur: The most awesome images on the Internet
I have been figuring this out since yesterday but still no luck.
Thanks in advance!
#overlay #picture #video
  • Profile picture of the author NetMan
    Originally Posted by dawoodkhan97 View Post

    Hi WF Members!
    I hate technical stuff and dont have much coding experience
    I am trying to find out how to overlay a video in a picture.
    I will be using this picture in one of my squeeze pages
    with a Macbook.
    Like this: Imgur: The most awesome images on the Internet
    I have been figuring this out since yesterday but still no luck.
    Thanks in advance!
    This is not something simple to do indeed.

    Is your site built in HTML5 or with WordPress?

    In HTML5 a graphics designer should be able to slice your Macbook image and provide you with the HTML file in which you can easily embed your video.

    With WordPress there very likely is some video player plugin that can just do that easily for you.

    Regards,
    Andre Foisy
    {{ DiscussionBoard.errors[10450027].message }}
    • Profile picture of the author dawoodkhan97
      Originally Posted by NetMan View Post

      This is not something simple to do indeed.

      Is your site built in HTML5 or with WordPress?

      In HTML5 a graphics designer should be able to slice your Macbook image and provide you with the HTML file in which you can easily embed your video.

      With WordPress there very likely is some video player plugin that can just do that easily for you.

      Regards,
      Andre Foisy
      Yes, It is on WP
      I am actually half way now
      Hope it is done
      {{ DiscussionBoard.errors[10450077].message }}
    • Profile picture of the author yukon
      Banned
      Originally Posted by NetMan View Post

      This is not something simple to do indeed.

      Is your site built in HTML5 or with WordPress?

      In HTML5 a graphics designer should be able to slice your Macbook image and provide you with the HTML file in which you can easily embed your video.

      With WordPress there very likely is some video player plugin that can just do that easily for you.

      Regards,
      Andre Foisy


      That doesn't even make sense. Wordpress is a CMS, the theme can be coded in HTML5 or anything else.




















      Originally Posted by dawoodkhan97 View Post

      Hi WF Members!
      I hate technical stuff and dont have much coding experience
      I am trying to find out how to overlay a video in a picture.
      I will be using this picture in one of my squeeze pages
      with a Macbook.
      Like this: Imgur: The most awesome images on the Internet
      I have been figuring this out since yesterday but still no luck.
      Thanks in advance!


      Maybe not the cleanest CSS but it works.

      Div background image frame source:

      Source files attached at the bottom of this comment.












      HTML Code:
      <!DOCTYPE html>
<html>
<head>
<style type="text/css">

#div-1 {
background-image:url('./images/1g.jpg');
background-repeat:no-repeat;
width: 600px;
height: 422px;
}

#div-2 {
position: absolute;
top: 0px;
left: 0px;
width: 420px;
height: 315px;
margin-left: 96px;
margin-top: 88px;
}

</style>
</head>

<body>

<div  id="div-1">
<div  id="div-2"> 

<iframe width="423" height="253" src="http://www.youtube.com/embed/X1ZRBPA8SK0" frameborder="0" allowfullscreen></iframe>

</div>
</div>

</body>
</html>
      {{ DiscussionBoard.errors[10450227].message }}
      • Profile picture of the author dawoodkhan97
        Originally Posted by yukon View Post

        That doesn't even make sense. Wordpress is a CMS, the theme can be coded in HTML5 or anything else.
























        Maybe not the cleanest CSS but it works.

        Div background image frame source:

        Source files attached at the bottom of this comment.












        HTML Code:
        <!DOCTYPE html>
<html>
<head>
<style type="text/css">

#div-1 {
background-image:url('./images/1g.jpg');
background-repeat:no-repeat;
width: 600px;
height: 422px;
}

#div-2 {
position: absolute;
top: 0px;
left: 0px;
width: 420px;
height: 315px;
margin-left: 96px;
margin-top: 88px;
}

</style>
</head>

<body>

<div  id="div-1">
<div  id="div-2"> 

<iframe width="423" height="253" src="http://www.youtube.com/embed/X1ZRBPA8SK0" frameborder="0" allowfullscreen></iframe>

</div>
</div>

</body>
</html>
        Although, I have solved the problem
        But yours also works perfectly!
        Thanks
        {{ DiscussionBoard.errors[10450275].message }}
      • Profile picture of the author NetMan
        Originally Posted by yukon View Post

        That doesn't even make sense. Wordpress is a CMS, the theme can be coded in HTML5 or anything else.
        It make sense completely sense as some WordPress plugins exist to do just that! One just need to read carefully before commenting back
        {{ DiscussionBoard.errors[10450345].message }}
  • Profile picture of the author Sid Hale
    Short answer... You can't.

    Originally Posted by dawoodkhan97 View Post

    Hi WF Members!
    I hate technical stuff and dont have much coding experience
    I am trying to find out how to overlay a video in a picture.
    I will be using this picture in one of my squeeze pages
    with a Macbook.
    Like this: Imgur: The most awesome images on the Internet
    I have been figuring this out since yesterday but still no luck.
    Thanks in advance!
    Static Images and Videos are different file types. There are even multiple file types for images (jpg, gif, png, etc.) and multiple file types for videos(flv, mov, mp4, etc.). Each file type has it's own software to render the file. Images are rendered directly by the browser, while videos typically require a particular video player, specific to the file type.

    That said...
    You can still accomplish your end goal, which is to "frame" the video so that it appears to be embedded in the image. You'll need some knowledge of HTML, maybe a little CSS, and it's not trivial.

    The basic stuff is easy, but you might pull out a little hair trying to get everything just right.

    First, create a fixed size "container" for everything. A div, a table, or a single table cell, for example. The fixed size (height and width) should match the dimensions of your image. Then specify your image not as the content of the container... but as the background image for that container.

    Your example probably already has all of that except for specifying the image as a background.

    Next, simply specify your video player as the content of the container, so that it "overlays" the background image. The trick to this is that you need to offset the video from the top of the container as well as from the left of the container to position it exactly where you want it to appear with respect to the background image (i.e. using CSS positioning statements).

    Depending on your skill level, positioning could be tricky for your first couple of attempts, but with experience, just about any skill can be mastered.

    Be aware that fixed sizes can/will cause problems on different devices (i.e. tablets and/or cell phones) so try to specify all positions/sizes in percentages rather than pixels.

    I realize this is only a beginning, but hopefully it will "give you a leg up" on the learning curve.
    Signature

    Sid Hale
    Coming Soon... Rapid Action Profits (Pro)

    {{ DiscussionBoard.errors[10450033].message }}
  • Profile picture of the author MiaSorensen
    I am curious to see what you did to do this. I have never tried it or anything like this myself. I now about editing videos and editing pictures, but not doing one over the other!
    {{ DiscussionBoard.errors[10450104].message }}

Trending Topics