• Robert Knight's avatar
    Avoid video embeds being cut off in narrow viewports · 8cee9051
    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
markdown-view-test.js 2.05 KB