Section 3.25 YouTube Video Embedding

<section xml:id="atomic-video">

  <title>YouTube Video Embedding</title>

  <p>
    An <tag>video</tag> can be placed in five different ways:
    <ol>

      <li>
        all by itself, as a peer of <tag>p</tag> typically, with layout control,
      </li>

      <li>
        inside a <tag>figure</tag>, earning a number and caption,
      </li>

      <li>
        inside a <tag>sidebyside</tag>, with size and layout configured,
      </li>

      <li>
        inside a <tag>figure</tag> inside a <tag>sidebyside</tag>, with size and layout configured, with a number and caption, and
      </li>

      <li>
        inside a <tag>figure</tag> inside a <tag>sidebyside</tag> inside a <tag>figure</tag>, with size and layout configured, with a number and caption, but now sub-numbered ((a), (b), (c),<ellipsis/>).
      </li>

    </ol>

    Examples of each, and more.
  </p>

  <p>
    A YouTube video is embedded much differently when hosted on a Runestone server, so that an <init>API</init> is available to report reader (student) interactions.
    We are testing here the various possibilities.
  </p>

  <p>
    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.
  </p>

  <video xml:id="yt-list-vars-one" label="youtube-list-vars-one" youtube="X1-UNHUajfk"/>

  <p>
    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.
  </p>

  <video xml:id="yt-list-vars-two" label="youtube-list-vars-two" youtube="X1-UNHUajfk" width="40%"/>

  <p>
    Asymmetric margins of 20% and 40% given, implying 40% width, equal to previous instance.
    Vivamus suscipit diam eget mi cursus viverra.
  </p>

  <video xml:id="yt-list-vars-three" label="youtube-list-vars-three" youtube="X1-UNHUajfk" margins="20% 40%"/>

  <p>
    Inside a <tag>figure</tag> with no adjustments, so default behavior.
    Note how a <tag>figure</tag> occupies the entire width of the page, so then does the caption.
  </p>

  <figure>

    <caption>List Variables</caption>

    <video xml:id="yt-list-vars-six" label="youtube-list-vars-six" youtube="X1-UNHUajfk"/>

  </figure>

  <p>
    Inside a <tag>figure</tag> with asymmetric (large) margins of 30% and 60%.
    Quisque finibus augue sit amet facilisis fringilla.
    Aenean faucibus augue tellus, et sollicitudin tortor finibus non.
  </p>

  <figure>

    <caption>List Variables</caption>

    <video xml:id="yt-list-vars-seven" label="youtube-list-vars-seven" youtube="X1-UNHUajfk" margins="30% 60%"/>

  </figure>

</section>