-
Robert Knight authored
Previously video embeds were given a fixed with of 369px, which is close to the width available to annotation content at the sidebar's default width (~380px). On narrower viewports the video would get cut off. Fix this by setting the width of video embeds to `100%` and using a CSS hack [1] to set the height of the video such that the embed has a 16:9 aspect ratio, which is what YouTube optimizes for. - Set `width: 100%` on `excerpt__content` and `markdown-view` so that the annotation content always fills the available width. - Add support for specifying a class name for embed containers when calling `replaceLinksWithEmbeds` and use that to give embeds rendered in `MarkdownView` a `width` of 100%. - Change `replaceLinksWithEmbeds` to wrap iframes with an aspect-ratio box (see [1]) which causes the iframe's height to be adjusted as the width changes to have a 16:9 aspect ratio. Adding this container required changes in `media-embedder-test` to allow the `<iframe>` to be wrapped in a container element. [1] https://css-tricks.com/aspect-ratio-boxes/
8cee9051