Embedded YouTube videos are displayed at a width you chose when generating the embed code. The problem is that the video can be too wide for small screens like on mobile phones. This article covers how to change the embed code so that the video will change size depending on the screen size.
The video will take up the full width of the column but will resize for smaller screens.
This is an example of the embed code you get from YouTube:
Make the following changes:
DIVwith the classes
embed-responsive-16by9. If you video is a 4:3 aspect ratio, use the class
The embed code will look like:
Unless you are using one of the latest themes, you will also need to add the following to the end of the
style.css stylesheet in your theme. You will find it by going to > Website Templates and selecting your theme and Assets/css/style.css. Using SFTP, select
/httpdocs/assets/themes/themename/css/style.css where themename is the theme name.
Here is what the responsive video will look like: