February 25, 2016

HOW TO: Play a YouTube Video Inside an iPhone Device Image

Quick intro

This guide explains how to easily display a YouTube video inside an iPhone frame. The result will look like in the demo video on the right-hand side (play the video to see how it works).

The process described here works also for other devices, such as iPad, Microsoft Lumia, Samsung Galaxy, Blackberry, HTC, MacBook, Apple Watch and many more.

How-to Guide

1 Create a new iPhone demo
  • First sign in or sign up for a free account on AppDemoStore.com
  • Create a new demo by clicking the button "Create Demo"
  • Give a relevant name to your demo video
  • Select an iPhone frame (iPhone 6, iPhone 6 Plus, iPhone 5, etc.) from the device frame gallery and click "Save"

2 Add a background screen

Once in the Demo Editor, the first thing you'll have to do is add a background image or color. To do this, click the round orange "+" button then "Upload Screenshot" or the "Add Color Screen".

The background image/color is useful when the video (that will come on top) is smaller than the iPhone frame. Also, it will appear in the demo thumbnail in the gallery or when sharing the demo.

3 Embed the YouTube Video
  • Add a video control to the demo screen, by clicking the "Add Video" icon
  • Insert the YouTube video link as showed in the image. The video will display immediately
  • Drag the corners of the Video control to position it accordingly
  • Click the "Preview" button and if everything is fine save the demo

4 Embed the demo (video + frame) into your website

To be able to share the demo, you'll have to change its privacy level from "private" (the default) to "hidden" or "public". To do this, click Settings > Visibility and select the "public" option.

Now you can copy the embed code and paste it into your website or blog. To find the embed code: on the Demo Page click the "Share" option and then "Embed" tab.

When embedded, the demo video will look like in this page.