Looking for something?

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.




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




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.




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




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




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) }}




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.





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


Powered by Zendesk