<figure id="audio-example">
  <figcaption><a href="https://player.fm/series/the-wired-podcast-2399070" title="Link to the Wired podcast page">Wired podcast on Microsoft and Augmented Reality</a></figcaption>
  <audio controls src="https://www.podtrac.com/pts/redirect.mp3/podcast-assets.wired.co.uk/wireduk418-170519.mp3">
            Your browser does not support the
            <code>audio</code> element.
    </audio>
</figure>

<figure id="video-example">
  <figcaption><a href="https://www.pexels.com/video/857045/download/?search_query=sea&tracking_id=cd3nq0bowxq" title="Ella Eleya video">A video from Pexels</a></figcaption>
  <video controls width="100%">
    <source src="https://www.pexels.com/video/857045/download/?search_query=sea&tracking_id=cd3nq0bowxq"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>
</figure>
body {
  font-family: Avenir, Helvetica, sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.