Display video in a computer screen image / frame?

I have a site rebuild where I am putting various software screenshots into iMac screens - makes an ugly screengrab look attractive!
image%20in%20imac%20example

Client now wants to know if I could show a video in the same style (the screen need NOT be angled like the one shown). Anyone have any ideas?

I was thinking about converting the video into an animated gif and putting that in but I’m concerned about file size, delay in animation starting and so-on. It is a non-audio file that needs to autoplay and loop.

Any suggestions welcome - thanks.

Could you not do this with SectionsPRO? Use the iMac as the background image and then drop the video on top of it?

2 Likes

Agree with rob. I think big white ducks sections pro (perhaps even sections box) would be ideal for this. Haven’t specifically tried it but seems it should work. If you don’t have the stacks from big white duck yet they are totally worth having. It’s donation ware, so free to download and try. I highly encourage anyone to donate to BWD if one ends up using their stacks. Let us know how it goes.

2 Likes

Would this help?

1 Like

Another alternative that comes to mind is to add the computer frame via video editing. A google for “add computer frame to video” produces several intriguing results. Here’s one link that outlines some options.

I am trying to squeeze my brain but I can’t remember the name of a very old theme with exactly that display.

Hi Guys,
I remember - there was a stack - I bought it, but never use in web, only for presentation.
https://rwextras.com/showcaseultra/
As Rob says BWD SectionPro will help also and I think, with a part of layers Joes «Target« will also work well…
Roger

2 Likes

think it may have been an old doobox stack but likewise cant remember or find it!

I’ll certainly give it a go!

I took a bit of time to play with sections pro with a vid stack overlay and computer background. While I still think it will work I wonder if the effort to successfully fit the movie within the frame with margins etc (especially when thinking about responsiveness) is going to be a sustainable solution. Might be? Just seems like it would be challenging to keep the proper fit so to speak. This is easily done in iMovie. I just quickly did the attached in less than five minutes. No attention to file size, quality etc., just a proof of concept. But IMHO this might be the easiest most reliable approach. Something to consider. Best of luck.

1 Like

Was it this stack? https://www.hovewebdesign.com

It doesn’t do video, just images, and isn’t on Gary’s current list of stacks.

Maybe go another route with Doobox’ Video Plus stack or Nick Cate’s Velvet video?

3 Likes

Thank you - I have load of angled ones but this is very useful!

Not getting anywhere with Sections pro - I’ve used it a lot for relatively straightforward applications but not like this. Using JW HTML5 video stack - which supports self hosted video - but getting it aligned to the background is unsuccessful so far. Likewise with Target. I shall persevere -all pointers gratefully received!

I also tried it in iMovie. Import the iMac.png and a video and then overlay the video on the .png (remember to stretch the still to match the time of the video), use picture-in-picture to size the video to match the computer screen in the .png.

Ok - not being a video editing type ! I added the iMac png to the timeline in iMovie. Then added the video above. Using the picture-in-picture setting I easily made the video fit the screen. However, the iMac png doesn’t fit the overall space and I have 2 large black borders either side. What am I doing wrong?

Thanks

If you want to send the PNG cutout and MP4 video file to me, I can probably code you something and get it working inside Builder stack.

The virus crisis means I am stuck at home unemployed indefinitely, so I have time to mess around and see if I can get something working for you. I have ideas of how this could work.

5 Likes

First awesome offer from @willwood! As to the border mentioned. I neglected to mention that in my example I did open the image and add some more white space around it. If using the iMovie approach one will likely need to fiddle with the image proportions and resolution to match their iMovie settings. I’ll try and take a look later today and offer some more detail from my perspective.

1 Like

Thanks - I thought that might be the case!

Will this would definitely be of interest - I’ll pm you and please give me a quote. If it gets my client what they want in a reusable format we can sort out some cash.

1 Like