oEmbed / iFrame resizing only works for YouTube/Vimeo links

[pb-amy]

Description

This was requested through this Zendesk ticket (for internal purposes). See also https://pressbooks.zendesk.com/agent/tickets/3163

This is a follow up to this GitHub ticket: #700 (comment) - We currently have a resizer script that dynamically resizes YouTube and Vimeo embeds so that they do not exceed the width of their parent containers:

pressbooks-book/assets/src/scripts/routes/single.js

Line 118 in 49da8be

let $allVideos = $( 'iframe[src*=\'//player.vimeo.com\'], iframe[src*=\'//www.youtube.com\']' );

However, as per the followup comment on the GitHub ticket above, other types of activities embedded via oEmbed (like PhetSims) or iframe do not have dynamic resizing rules which apply to them. In particular, these embedded elements exceed the width of their container when inserted inside of various textbox divs.

Steps to Reproduce

1. Take a PhetSim example: https://phet.colorado.edu/sims/html/john-travoltage/latest/john-travoltage_en.html
2. Copy into an editor inside and outside of a textbox.
3. Preview

Expected behavior: Should size properly, and stay in the bounds of the textbox.

Actual behavior: oEmbeds in textboxes size as if they are outside of the textbox (embeds exceed the borders of the textbox.)

[SteelWagstaff]

One possible model for implementation might be https://gist.github.com/jlengstorf/ce2470df87fd9a892f68. See #592 for implementation with YouTube videos