CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Responsive iframe

Responsive wrapper for iframe elements (e.g., YouTube and Vimeo videos).

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

How To

This Responsive iframe component allows you to display a responsive iframe element whose height is modified according to the aspect ratio of its content.

It can be used to embed content like YouTube or Vimeo videos (that are not responsive by default).

The default aspect ratio used for the iframe is 16:9 (which is the standard YouTube video aspect ratio).

You can create variations of the .responsive-iframe class to cover different aspect ratios.
For example, for the 4:3 ratio you can use the following class modifier:

.responsive-iframe--4\:3 {
  padding-bottom: 75%; // 4:3
}

Changelog

  • ✅ Component created
    🗓 February 21, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us