Hello,
I have a screencast recording from an iPhone X that I would like to embed onto my webflow site.
I need help understanding the best method in post production of the video, hosting options and how to best embed into my webflow site?
I would like to keep the video within an iPhone graphic png shell.
Can I achieve this? Anyone know how?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Most easiest way it to host your vertical MP4 file by yourself, you can start with Dropbox for example, and grab a ink to the file from there. Then use custom code to craft your own HTML5 video player. You’ll place the result in the middle of your PNG.
For the playyer, google “HTML5 video” and you’ll fiind sample code. As for today, you only need a MP4 file, so you can avoid producing the other formats. You need only 1 video MP4 and 1 image for the “cover”.
I’m not getting too much into details, feel free to ask for them.
Thank you Vincent, I have it working. A little messy though.
You can view it here How to book an appointment
What I have done to-date;-
Hosted my video on droxbox and created a open view share. After trial and error I found you need to change the extension on the end of the share from ?dl=0 to ?raw=01 to make the video work.
I have used the video.js opensource found here Getting Started with Video.js - Video.js: The Player Framework What I did was to add the script to the page head and the html as a webflow embed.
I have structured my webflow nav as;-
Container
Div (background picture of iphone png)
Div (Flexbox)
Embed html
Seems to be working, however a little messy. I would like to encase the video within the iphone png. Or maybe a z-index to have the png on-top.
Just not sure the best approach. Open to any suggestions?
Hi @mrstylist, a couple of things, first, I love the name and purposes of this site. My dog Rex would love it 
Second, I think the approach you have taken is a good one, working with video embeds can be tricky.
Third, you might want to adjust the video-js class using custom css to exactly match the dimensions of the video embed, there is just a small amount of overflow shown on the corners when the video is displayed:
Not a big deal, but there is probably some styling solution for this, probably by adjusting the radius of the video-js object and perhaps adjusting overflow, I am checking a bit to see if I have anything to add there.
Overall, it looked fine to me when resizing, which can be one of the trickiest parts of exact placement of videos on a page.
One note, when the user plays the video, currently the video will expand to the full screen of the phone as shown:
This means that either that would have to be updated to play in place without maximizing, that is something to look into if that is not wanted.
I am checking to see if I have some further ideas on this kind of layout as I think this could be a useful tutorial.