Add Responsive Video to a Docs Article

Video is a great way to help customers in your Docs site. The default design for Docs overall is responsive — it looks nice on a computer or a mobile device — but you may find you'll need to add a bit of CSS to your video embeds or alter your video provider's default embed code to ensure the video will load in a way that looks great on all platforms and within Beacon. Here we will show you how to add a snippet of CSS to your video embed code to make it responsive, and we'll offer a few provider specific tidbits we've seen.  

In this article

Add CSS Classes for Responsive Video

1
Grab the embed code from your video provider (we recommend Wistia but you can use YouTube, Vimeo, or the video service of your choice). Click the image button in the Docs editor and select Insert Video.
2

Paste your video embed code you got from your video provider, and add a bit of HTML around it. You'll just wrap in in a section tag, giving it a class of video. If it's a widescreen video, add the class widescreen as well.

Not sure how to do that? We've got you! Here's the code you want to copy for a widescreen video.

<section class="video widescreen"> VIDEO EMBED CODE GOES HERE </section>

A widescreen video embed then would look something like this:

Specific Provider Notes

Each video provider offers different built-in options with their default embed codes. You may need to modify the default embed code they provide or use a specific version of their embed code to properly set a responsive video in Docs. 

You'll still want to wrap the embed in the CSS snippet as shown above, but if you're still seeing video out of bounds after adding that, these tweaks can get things cleared up for you. 

Wistia

You want to use either their Standard inline embed or the Fallback inline embed to embed your video. 

YouTube, Vimeo, and Facebook

YouTube, Vimeo, and Facebook all include width and height specifications in their embed by default, which can keep your video from being responsive. You may see this in another video hosting service as well. Removing those specifications from their embed codes should do the trick for you! 

As an example, here's the default embed code for a YouTube video about Help Scout's Against the Grain series:

<iframe width="560" height="315" src="https://www.youtube.com/embed/CHiD1Kz-rJQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Make sure you still wrap it in the CSS as shown above, but also remove the width and height designations in the embed to make sure your video is responsive!

<section class ="video widescreen">
<iframe src="https://www.youtube.com/embed/CHiD1Kz-rJQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>

If you're using some other video hosting service that we've not listed here — give us a shout if you've found the extra nudge their code needs to play nicely!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still stuck? How can we help? How can we help?