This is a website template to display an app recording inside an iPhone 6.
-
git clone [email protected]:sbolel/app-video-demo-html.git
- clone this repository. -
Replace
./www/sample-demo.mov
file with your own screen recording. -
Change the video
src
in./www/index.html
:
<video autoplay width="375" height="667" name="Demo Video" src="sample-demo.mov"></video>
Open ./www/index.html
To serve the demo application using Grunt, you need to install Node.js and npm. Note that installing Node.js should install npm as well.
Once npm is installed, run the following commands in the cloned directory:
npm install
- Install dependencies
grunt
- Serve the website in Google Chrome using Grunt
- The background image is of an iPhone 6
- Video dimensions should be near 375x667 or 748ร1108
- To capture a mobile demo video of a web app on OS X,
- Use Chrome DevTools to emulate an iPhone 6.
- Use QuickTime Player to record the portion of the screen that shows your web app.