pressbooks / pressbooks

Open publishing. Open web. Open source.
https://pressbooks.org/
GNU General Public License v3.0
422 stars 133 forks source link

Reference H5P resizer script for activities embedded from external sources #1889

Open mcgratay opened 4 years ago

mcgratay commented 4 years ago

Prerequisites

Description

Videos from YouTube and Vimeo resize automatically, but video iframes hotlinked from H5P do not. Add H5P domain

Example iframe: <iframe src="https://cdu.h5p.com/content/1290475711255620999/embed" width="560" height="380" frameborder="0"></iframe>

Screen Shot 2020-01-30 at 11 59 23 AM

Domain: h5p.com

Example test book: https://h5presize.textopress.com/chapter/chapter-1/

Note: Interactive videos hosted in a book's H5P library are responsive - this problem only affects hotlinked iframes from external H5P sources.

Steps to Reproduce

  1. Find a H5P interactive video activity and copy the iframe embed code
  2. Open a new chapter and paste the iframe code into the text editor
  3. Save the chapter and view in webbook format

Expected behavior: Video resizes with screen

Actual behavior: Video size is static

SteelWagstaff commented 4 years ago

Will look at in more detail, but we should note that H5P activities already have their own resizer script: https://github.com/h5p/h5p-php-library/blob/master/js/h5p-resizer.js and https://h5p.org/comment/23140#comment-23140. When an H5P activity is embedded from elsewhere, it attempts to include a reference to this resizer, but we strip it out for security reasons. See conversation here: https://github.com/hypothesis/client/issues/509#issuecomment-320594957 for more context/options.