MUSIC ON

Video

Video

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
    4:3
    Widescreen
    • 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="http://player.vimeo.com/video/24974265?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    
    </div>
    
    <div class="flex-video">
    
      <iframe width="420" height="315" src="http://www.youtube.com/embed/NJtOKFrEODQ" frameborder="0" allowfullscreen></iframe>
    
    </div>
    
    <div class="flex-video widescreen">
    
      <iframe width="560" height="315" src="http://www.youtube.com/embed/NJtOKFrEODQ" frameborder="0" allowfullscreen></iframe>
    
    </div>
    
    

Our Partners