As most people do, before going in and coding the HTML/CSS of a site, I usually like to create the design in an application such as Photoshop (and for recent projects, Affinity Designer) and then export the design as an image so that I can send it to the client and confirm they like the design.

I want to show that a design has a video background, and I'm not quite sure how I'd do this. I would just put a still from the video in the design, but then it isn't clear that it's a video and not an image, so I'd need to explain to them that it's a video, and they would need to be able to visualize it as a video.

I was thinking that perhaps I could somehow embed the video into the document and export it as a video, and just place that video in a HTML page so that it occupies the full width & they can scroll down it. This doesn't feel like a very good solution to me, especially since most design programs do not support this. However, I can't think of any better ideas on how to present it.

What are some good ways to present a design which has a video background as a key element in the design to the client, without having to code the whole website and (potentially) having to scrap it all?

(Answers which work with Adobe Photoshop or Affinity Designer are preferred)

2 Answers 2


Probably one option is to actually prepare a template of a website with a video background.

Either you include the text and logos over the video inside the video itself or you can simply put a transparent png over a video.

This template will give you clues about specific problems on this. How the changing angle an motion of a video interacts with your design.

  • Thanks for the answer! This sounds like a good idea, can't believe that I didn't think of it! Thanks, once again. Commented Aug 15, 2016 at 21:11

You could place the video directly in your PSD mockup and then edit it into a short preview using the Timeline window under Window > Timeline. Then you could export it as an animated GIF using File > Export > Save for Web and Devices or as a video using File > Export > Render Video.

I would recommend video over GIF because the resolution will be restricted on a GIF.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.