How to make wordpress theme iframe responsive

After some research, I came across this article and ended up with the
solution below.

<div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        src="http://slither.io/" width="100%" height="100%" frameborder="0" 
        scrolling="no" seamless="seamless" allowfullscreen="allowfullscreen">
    </iframe>
</div>

What this code does is that it set the div’s width to 100%, and then
make the div’s resolution to always be 16:9 ratio by setting

padding-bottom: 56.25%;

Setting the wrapping div’s position to be relative and the iframe’s
position to be absolute also plays an important role here.

Now the div always responses to the parent container and always keeps
the resolution ratio at 16:9.

You can change the ratio by changing the "padding-bottom: 56.25%" to
the ratio you want (notice that 56.25/100 == 9/16).

If you want to make your code more beautiful, you can add a custom CSS
to your site (by altering the theme’s code files or adding a custom
Text Widget) as following

.responsiveWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.responsiveWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="responsiveWrapper">
    <iframe src="http://slither.io/" frameborder="0" 
        scrolling="no" seamless="seamless" allowfullscreen="allowfullscreen">
    </iframe>
</div>

Source:
https://hexadix.com/tag/slither-io/