Section 5.24 YouTube Video Embedding
An
<video> can be placed in five different ways:- all by itself, as a peer of
<p>typically, with layout control, - inside a
<figure>, earning a number and caption, - inside a
<sidebyside>, with size and layout configured, - inside a
<figure>inside a<sidebyside>, with size and layout configured, with a number and caption, and - inside a
<figure>inside a<sidebyside>inside a<figure>, with size and layout configured, with a number and caption, but now sub-numbered ((a), (b), (c),…).
Examples of each, and more.
A YouTube video is embedded much differently when hosted on a Runestone server, so that an API is available to report reader (student) interactions. We are testing here the various possibilities.
All by itsef, with no layout specified, so showing the default size and placement. Vivamus in congue massa. Morbi condimentum ac magna at accumsan. Vestibulum ac augue eu lorem semper gravida.
Width set at 40%, so equal margins and thus centered. Aenean faucibus augue tellus, et sollicitudin tortor finibus non. Maecenas semper dolor quis diam placerat, iaculis sollicitudin augue finibus. Vestibulum facilisis ligula lectus, ac tristique nisl aliquet non.
Asymmetric margins of 20% and 40% given, implying 40% width, equal to previous instance. Vivamus suscipit diam eget mi cursus viverra.
As a plain component of a
<sidebyside>. Widths here are 20% and 30%, margins and gaps are automatic, default alignment on top edges. Nulla pharetra imperdiet elit, in sodales nibh blandit ultricies. Maecenas efficitur ac felis ut pharetra.Inside a
<figure> with no adjustments, so default behavior. Note how a <figure> occupies the entire width of the page, so then does the caption.Inside a
<figure> with asymmetric (large) margins of 30% and 60%. Quisque finibus augue sit amet facilisis fringilla. Aenean faucibus augue tellus, et sollicitudin tortor finibus non.Inside figures inside a
<sidebyside>. Same widths as previous <sidebyside> but alignment on bottoms of the panels, to partially align captions. Note how the captions are constrained in width by the width of the panels of the side-by-side.Identical code to previous example, but now wrapped in an overall
<figure>, which has its own caption and number, leaving the interior figures to be sub-numbered. Cross-references use the full number: Figure 5.24.5.(b).
