Make iFrames Responsive

[SteelWagstaff]

Feature Scope

• [ ] Accessibility and inclusivity
• [ ] User interface (content creation)
• [ ] User interface (network home page & catalog)
• [X] User interface (reading)
• [ ] Import/export formats
• [ ] Authoring tools
• [X] Book themes
• [ ] Integration with third-party services

Feature Description

I'd like to make iFrames embedded in Pressbooks size responsively. In particular, it would be nice to have videos and other elements inserted through oEmbed be resized as browser width changes. One possible model for implementation might be https://gist.github.com/jlengstorf/ce2470df87fd9a892f68.

Feature Use Case

This should benefit anyone who embeds interactive content in their site using oEmbeds. Currently, many oEmbed links include height and width values in their inline styling, which causes display problems, particularly on mobile devices. See the screenshots below for one example of a modestly-sized Youtube video on a narrow browser width:

[SteelWagstaff]

Related: https://github.com/pressbooks/pressbooks-book/issues/592

[SteelWagstaff]

Closing in favor of https://github.com/pressbooks/pressbooks-book/issues/721