Responsive Embeds

Close this notice

Old Version

This documentation is for version Framework 4.1. When developing new sites, please refer to 5.0 Framework Documentation.

Skill Level: 
Beginner

As of version 4.1.10, responsive embed styles are available. Responsive embed code allows you to embed media from outside sources such as UNL MediaHub and make them fit to different screen widths and mobile devices easily.

Example

<div class="wdn-responsive-embed wdn-aspect16x9">
    <iframe src="..." title="title text" allowfullscreen></iframe>
</div>

Details and options

To create a responsive embed, first place your embed code within a <div class="wdn-responsive-embed"> container. The embed code within this container can be a <embed>, <iframe>, <object>, or <div class="wdn-responsive-item">

The last requirement is to give an aspect ratio class to the .wdn-responsive-embed container. This class can either be .wdn-aspect16x9 or .wdn-aspect3x4.

Contributed By: 
IIM