Please read our Embedding article for more information about this topic.
In order to make your iframe embed responsive you have to follow the following steps:
- Step 1: Get the player embed code and paste into an HTML page
- Step 2: Set the height and the width attributes of the iframe tag to 100%
- Step 3: Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
- Step 4: Add a div container around the iframe tag as it is shown by the following sample code.
The value of the 'padding-bottom' parameter is calculated from the aspect ration of the content (in case of 16:9 it is 9/16= 0.5625)
style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
style="position:absolute; top:0; left: 0"></iframe>