Nobody likes iframes. That's because you can't style their innards, and they aren't responsive... or are they?!?!
The first thing to know about here is the padding height hack. This allows you to set the height of an object relative to the width, because while height is always as a percentage of the container, padding height is as a percentage of width. So all you have to know is the ratio of height to width and you can make a thing that responsively scales.