Today I’ll show how to present your mobile app prototype with a YouTube video inside a smartphone image. You can see an example here.

Videos ’er Great

Video-based prototypes are great for business stakeholder reviews and online portfolios. Placing your video inside a smartphone image provides rich context.

Hosting videos on YouTube means they’re accessible to anyone with an internet connection. YouTube has privacy settings to keep your prototype secret if needed.

Quality

Viewers can see motion graphics in full HD. Audio allows you to demo sound design concepts or narrate key sections.

Screenshot of the finished product

Difficulty=low

If you’re familiar with HTML/CSS this is straightforward and will save you time reading lengthy YouTube specs. If you can cut/paste, and upload files to a server, you can do this!

Only Requires…

  1. YouTube account
  2. Server to upload an HTML file

Why not use X?

Some say why make videos when tools like InVision and Marvel make it easy to create quick interactive prototypes?

It’s because our work-in-progress prototypes lack several key components of the experience. Not every business stakeholder will navigate the confusion of a bare-bones draft. Convincing them to use your interactive web prototype is hard. And they’ll never load your app prototype on their phone! Easiest method wins. While InVision/Marvel are great, they’re just too new for some. Videos are simpler.

I often use animated GIFs to communicate motion graphics, but these also have drawbacks. GIF files get quite large so you can only show a few pixelated interactions. They only play in loop mode without the option to pause.

Enough rambling, let’s begin.

Convert to Video

Start by creating a basic video-based prototype in Keynote, or any video editing software.

I built my screens in Sketch then exported to InVision. If you’re like me and already built a prototype in InVision/Marvel you can convert to a video using a screen recorder like QuickTime.

I made my prototype in InVision and captured a screen recording using QuickTime
QuickTime allows you to crop the recording area to any size

Save your video to the desktop.

YouTube

Time to upload your video to YouTube. If you don’t want audio, avoid my mistake and delete it beforehand as it’s impossible afterward.

After uploading, it’s time to fuss with the video player’s appearance.

YouTube has lengthy documentation on video player display settings. You can read the spec if you wish, but I’ve already included the most useful functions in the code below. These include auto-play video, replay video, hide player controls, and hide video title.

YouTube obviously adds black bars to vertically-oriented videos, as shown in my YouTube video file. Let’s hide these bars.

HTML

Let’s place the video on your site. Your YouTube video will be displayed in an iFrame.

Copy and paste this code and replace the bold portions with your URL and video playlist name:

<div id=”phone”><iframe width=”305" height=”543" src=”https://www.youtube.com/embed/EHXpRLTf_DY?autoplay=1&loop=1&controls=0&showinfo=0&playlist=EHXpRLTf_DY" frameborder=”0" allowfullscreen></iframe></div>

Video dimensions can vary so remember to adjust pixel dimensions as needed.

CSS

Add the Nexus 6 phone image with a CSS background-image property:

<style>
#phone { background-image: url(“/nexus6.png”); background-repeat: no-repeat; height: 650px; width: 338px; margin: 0 auto 30px; position: relative;}
iframe { position: absolute; top: 59px; left: 16px;
</style>

Now you’re all set! If you had any issues, view the full source on my example to compare code.

Conclusion

I hope this helps show off your work!

Resources

Working Example
Nexus 6 image

Show your support

Clapping shows how much you appreciated Ben Kennerly’s story.