If you’re embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.

  • Vimeo
    • Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only – no extra padding for the controls.

    • 4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.

    • By adding a class of .widescreen we change the ratio to 16:9, ideal for more recent video and most popular YouTube or Vimeo embeds.

    <div class="flex-video widescreen vimeo">
      <iframe src=";byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <div class="flex-video">
      <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
    <div class="flex-video widescreen">
      <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

Our Partners