Skip to main content
live This is a new website – your feedback will help us to improve it.

Responsive embed

Overview

Use the .bsk-embed-responsive class on an element wrapped around a video or other media item to allow browsers to scale them.

Use the .bsk-embed-responsive-item class for the video or other meida item itself.

You must pick a variant for each responsive embed, otherwise it will look strange. It is not enough to use .bsk-embed-responsive on its own.

You don’t need to include frameborder="0" on embedded items, as the Style Kit will add this for you.

Supported elements

These elements are fully supported:

  • <iframe>
  • <embed>
  • <video>
  • <object>

Variants

Responsive embed 16:9

<div class="bsk-embed-responsive bsk-embed-responsive-16by9">
  <iframe class="bsk-embed-responsive-item" src="https://player.vimeo.com/video/32397612" allowfullscreen></iframe>
</div>
<div class="bsk-embed-responsive bsk-embed-responsive-16by9">
  <iframe class="bsk-embed-responsive-item" src='https://nercacuk.sharepoint.com/portals/hub/_layouts/15/VideoEmbedHost.aspx?chId=f781382f%2D8cde%2D4116%2D9778%2D6e0106703465&amp;vId=d5221c74%2D7b37%2D4a51%2D8ec6%2D50ce52dbdd4e' allowfullscreen></iframe>
</div>

Responsive embed 4:3

<div class="bsk-embed-responsive bsk-embed-responsive-4by3">
  <iframe class="bsk-embed-responsive-item" src="https://player.vimeo.com/video/32397612" allowfullscreen></iframe>
</div>