[Isaac RParticipant]

Hi there!

I’d like to create this effect with an embedded video: http://www.oneminutemessenger.com/

Basically putting the video inside a mockup of a laptop ( I assume the mockup needs to be a background image).

The trick is getting the video and the image to scale together …

Could you please walk me through the steps needed to accomplish this with X ?

Thanks so much for your help as always.

Best,
Isaac

[RadModerator]

Hi Isaac,

Thanks for posting in.

That’s possible with html5 video with custom aspect ratio. You can’t use youtube, vimeo, or any other hosted videos because they are inside the iframe.

Maybe we could help you implementing it, but with conditions 🙂

1. Provide a url address for test page where your image is.
2. Admin login credentials for testing.
3. And then the video url needed.

Thanks!

[Isaac RParticipant]

Hey there!

Thanks ..,

what about something like this? http://www.fieldagent.net/

Isn’t this a vimeo hosted embed?

I see it’s not totally responsive, but how would I so something like this with a video hosted on vimeo. I’d rather acoid self hosting a video.

[ZeshanMember]

Hi Isaac,

Thank you for writing in!

This is an HTML5 video and isn’t using iframe as mentioned above (see: http://prntscr.com/4tlhoo). We’ll be happy to assist you if you can provide us the above required information 🙂

Thank you.

[Isaac RParticipant]

This reply has been marked as private.

[Kosher KMember]

Hi Isaac,

I’ve created two samples for you, you can see it here -> http://www.adventureppc.com/small-business-new/

the first one uses text element and added directly video wrap by a .frame-holder div class

The second one used embed video element without container and assign .frame-holder class into it,

You can see the CSS on that page CSS. Both of the example doesn’t fit with the height of your image, you can either adjust the image and use the 2nd example,

or use the first example and used HTML5 player instead of iframe to define custom width and height http://www.w3schools.com/html/html5_video.asp

Hope that helps,
Have a great day

[Isaac RParticipant]

thanks so much for taking the time to do this!

You guys are really the best support team in the business …

Best,
ISaac

[CousettMember]

We are so glad we were able to help and provide a high level of support. Have a nice day.

[Author]

Posts