iframes do not display properly in theme (dimensions)

[vgoel]

I am trying to embed Youtube videos in a blog post ... please see snippet below. The dimensions of the embedded video that show up in the post are not what are specified in the code.

<iframe width="560" height="1200" src="https://www.youtube.com/embed/v5ASgX60Lg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[chrisrhymes]

It looks like the best way of accomplishing this with Bulma is to wrap the iframe in a figure tag with the .image class and the ratio you want to use, such as .is-9by16 and then apply the .has-ratio class to the iframe and remove width and height. This way, the video will be responsive and still stick to the desired ratio on different screen sizes.

<figure class="image is-9by16">
<iframe class="has-ratio" src="https://www.youtube.com/embed/v5ASgX60Lg8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>

The full list of available ratio's is available on the Bulma website

I've found markdown can be picky with the indentation of html tags and sometimes converts to <pre> tags, so I try not to indent the html where possible.

[vgoel]

Works good now. Thanks