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 also works for other devices, such as iPad, Apple Watch, MacBook computers, Samsung Galaxy devices and many others.
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"
- Select an iPhone frame (iPhone 7, iPhone 7 Plus, iPhone 6, etc.) from the device frame gallery and click "Save"
2 Add a screen
Once in the Demo Editor, the first thing you'll have to do is to add a screen. To do this, click the Plus button then either Upload Screenshots or Add Empty Screen.
Uploading a screenshot is useful when the video (which will come on top) is smaller than the iPhone frame. Also, the image you upload will appear as the demo thumbnail in the gallery or when sharing the demo.
3 Embed the YouTube Video
- Add a video control to the 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 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 the Embed tab.
When embedded, the demo video will look like in this page.
