Mobile Responsive iframes
The best practice is making an iframe responsive so that the iframe and the iframe contents resize for mobile devices. Iframes should not have a fixed height and width. Wrap any embed, like an <iframe>, in a parent element with .ratio and a Bootstrap aspect ratio class. The immediate child element is automatically sized.
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/abcdef" title="Add YouTube video title here" allowfullscreen></iframe>
</div>
Responsive iframe with breakpoint
There is a .responsive-iframe_16x9 CSS class that sets the iframe to 16:9 ratio for tablets and desktops but changes to a 1:1 ratio on mobile for iframe contents like Tableau that stack the contents on small screens. There is also .responsive-iframe_4x3 class that sets a 4:3 ratio for tablets and desktops but a 3:4 ratio on mobile.
<div class="ratio responsive-iframe_16x9">
<iframe src="https://www.youtube.com/embed/abcdef" title="Add YouTube video title here" allowfullscreen></iframe>
</div>