Looking for something?
Follow

How to Make a Video Responsive

You've spent time embedding a video onto a cms page only to realise that when it's viewed on a mobile phone, you can only see half the video?


The solution, you must the video responsive.

 

So here's my video that I embedded into my cms page.

 

mceclip0.png

 

The problem is, it looks like this on a mobile phone.

 

mceclip1.png

 

To fix this, go back to the cms page with the video on it and click 'Share' in the top right hand side corner of the video.

 

mceclip2.png

 

Click on the Video link to open the video in YouTube.

 

mceclip8.png

 

Navigate to the address bar at the top of the page and copy the code after the 'equals' symbol and before the 'ampersand.'

 

mceclip3.png

 

Delete the video on the cms page and replace it with this link below, inserting the code into 'the code' at the end of the URL.

 

{{ responsive_embed(https://www.youtube.com/embed/the code) }}

 

In my example, the code from the URL copied is this: WCzyLi3PJx8

 

So this is entered onto the cms page: {{ responsive_embed(https://www.youtube.com/embed/WCzyLi3PJx8) }}

 

mceclip5.png

 

Note that the code does not need to be in bold. If you refresh the cms page on the site, it should now have automatically resized the same width as the mobile phone that you're using to view the site.

 

mceclip7.png

 

 

Let us know if this information has been helpful.
We'd love to hear your feedback!

0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk