I wish I could say I figured it out myself, however, I didn’t. I needed a solution that allowed me to take an iframe posted in a page (to load external content) and make it responsive, keeping with the mobile-first mindset.
Initially, I started with multiple breakpoints, however, due to the external content is video, there were always black bars either at the top and bottom or sides of the video. Not really the best solution, I wasn’t happy with it, and Google search turned up Chris Coyier’s post on css-tricks. He runs through a bunch of ways to make several different types of media responsive.
Even though the solution for the iframe/video adds an extra div, I’d much rather have that then some heavy JS trying to keep track of what size screen the user is on.