Add Responsive Video to a Docs Article

Video is a great way to help customers understand your product. The default design for Docs is responsive — it looks nice on desktop, mobile, or tablet — but you might need to add a bit of CSS to your video embeds to make sure they stay within the bounds of your article. Here we will show you how to insert a responsive video into an article.

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.

Note: For Wistia specifically, you'll want to use the Inline Embed code. Either Standard inline embed or Fallback inline embed will work great!

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:

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?