A fixed player width and height might not always serve your needs. Sometimes you want your player to grow dynamically with the size of your page. An example of how this can be done can be found below.
Explanation of the sample piece of code above:
- In our example we have a parent div that will always take 75% of the screen. You can change this to your needs using CSS rules (think about setting a maximum height, using media queries for different device widths, etc.).
- The child div will take up all the space of the parent div (
width: 100%). The
padding-bottom: 56.25%allows us to keep the video dimensions:
56.25%is the value to be used if your video has a 16:9 dimension (9/16 = 0.5625 = 56.25%). You can perform the same calculation if your video has different dimensions.
- The div with the
data-theo-liveattributes has an
bottomall being set to 0. This means that it will span the entire size of the relative-positioned parent.
In the screenshots below you can see the video always taking up 75% of the screen and thus applying the auto-sizing rules based on the screen width.
Updated over 1 year ago