Responsive embed

Follow these steps to create a responsive embed

• Insert the player embed code into an HTML page
• Set the iframe tag’s width and height attributes to 100% inside of the embed code
• Change iframe tag’s CSS position parameter to absolute and set the left and top css parameters to 0 if needed
• Add a div container around the iframe tag with the following css parameters where padding-bottom parameter’s value is calculated from the original proportions of the embedded content (eg. 9 / 16 = 0.5625)

<div
  id="Container"
  style="padding-bottom:56.25%; position:relative; display:block; width: 100%"
>
  <iframe
    id="UstreamIframe"
    src="https://video.ibm.com/embed/recorded/131906526"
    width="100%" height="100%"
    style="position:absolute; top:0; left: 0"
Copy to clipboard

Example