Resources

WebPOS Quick Guide: Adding a video to responsive content

By Annabel Paton

This quick guide will take you through adding a video into your responsive content.

Add a content row and decide how many columns you’d like for each breakpoint.

In this example our video will stack on top of other content when the screen size gets down to small or extra small.

Now add your content block and pick video from the type options

Firstly we’re going to add a YouTube video. the code you need to paste in here can be found in the videos share tab on YouTube

As the width is fixed due to the website grid, experiment with the height to get the aspect ratio correct. here we’ve settled on 350 pixels

In this example we’re adding a text block next to it to demonstrate the responsive result.

You can see the resulting published webpage here. as we cycle though the different widths you can see the content stacks as expected when we get to a portrait tablet example and it stays that way down to mobile size

Its also easy to change the video streaming provider down the line.

In this example we’re changing the video from YouTube to Vimeo. Just find the appropriate share code as before and WebPOS automatically updates the content.

How Can We Help

Get in touch to find out how we can help you Contact Us
Click here to chat