How do you make a YouTube video on a page responsive?

Modified on Mon, Feb 13, 2023 at 3:24 PM

Description: We added a YouTube video to our page. It looks fine on desktop but on mobile, the video becomes truncated. How can we make the video responsive?


Answer: Add the following code to the end of the YouTube embed code: style="max-width: 100%;" as seen on step 3.


Follow the steps below to to make your video responsive using the text editor in CMS:


  1. Click Disable visual editor 
  2. Highlight the component row then click the Edit Component icon 
  3. In the Embed Content Item window, add the following code after "allowfullscreen":  style="max-width: 100%;" 
  4. Click OK
  5. Click Enable visual editor to return back to the visual editor (WYSIWYG) screen (optional) 
  6. Click Save


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article