Main

Media Embed

Allows editors to embed YouTube or Vimeo media within content.

Example

Open this example in new window

Macro - YouTube


{{ media({
    title: "Pellentesque sit amet nulla",
    description: "Fusce at neque laoreet mauris consectetur mollis at a nisl. Curabitur sit amet sapien rhoncus.",
    type: "youtube",
    transcript: ["Donec pulvinar sollicitudin massa, nec pulvinar turpis dictum maximus."],
    mediaId: "C0DPdy98e4c",
    lastReview: "09/05/2022",
    reviewDue: "09/05/2023"
}) }}

HTML - YouTube


<div class="hee-media">
    <h2>Pellentesque sit amet nulla</h2>
    <div class="hee-media__description">
      <p>Fusce at neque laoreet mauris consectetur mollis at a nisl. Curabitur sit amet sapien rhoncus.</p>
    </div>
    <iframe class="youtube" src="https://youtube.com/embed/C0DPdy98e4c" title="Pellentesque sit amet nulla" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"></iframe>
    <div class="hee-media__info">
      <div class="hee-media__transcript">
        <a href="javascript:void(0);">
          <span class="hee-media__show-text">Show transcript</span>
          <span class="hee-media__hide-text">Hide transcript</span>
        </a>
        <div class="hee-media__transcript-text">
          <p>Donec pulvinar sollicitudin massa, nec pulvinar turpis dictum maximus.</p>
        </div>
      </div>
      <div class="hee-media__reviews">
        <p> Page last reviewed: 09/05/2022 </p>
        <p> Next review due: 09/05/2023 </p>
      </div>
    </div>
</div>

Macro - Vimeo


{{ media({
    title: "Pellentesque sit amet nulla",
    description: "Fusce at neque laoreet mauris consectetur mollis at a nisl. Curabitur sit amet sapien rhoncus.",
    type: "vimeo",
    transcript: ["Donec pulvinar sollicitudin massa, nec pulvinar turpis dictum maximus."],
    mediaId: "226053498",
    lastReview: "09/05/2022",
    reviewDue: "09/05/2023"
}) }}

HTML - Vimeo


<div class="hee-media">
    <h2>Pellentesque sit amet nulla</h2>
    <div class="hee-media__description">
      <p>Fusce at neque laoreet mauris consectetur mollis at a nisl. Curabitur sit amet sapien rhoncus.</p>
    </div>
    <iframe class="vimeo" src="https://player.vimeo.com/video/226053498" title="Pellentesque sit amet nulla" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"></iframe>
    <div class="hee-media__info">
      <div class="hee-media__transcript">
        <a href="javascript:void(0);">
          <span class="hee-media__show-text">Show transcript</span>
          <span class="hee-media__hide-text">Hide transcript</span>
        </a>
        <div class="hee-media__transcript-text">
          <p>Donec pulvinar sollicitudin massa, nec pulvinar turpis dictum maximus.</p>
        </div>
      </div>
      <div class="hee-media__reviews">
        <p> Page last reviewed: 09/05/2022 </p>
        <p> Next review due: 09/05/2023 </p>
      </div>
    </div>
</div>

Macro - Anchor FM


{{ media({
  "type": "anchor",
  "src": "https://anchor.fm/health-education-england/embed/episodes/Robyn-Scargill---Trainee-nursing-associate-eqe7mk/a-a4l5nun",
  "title": "Anchor.fm Example",
  "lastReview": "01/01/2021",
  "reviewDue": "01/01/2022"
}) }}

HTML - Anchor FM


<div class="hee-media">
  <h2>Anchor.fm Example</h2>
  <div class="hee-media__container anchor">
    <iframe src="https://anchor.fm/health-education-england/embed/episodes/Robyn-Scargill---Trainee-nursing-associate-eqe7mk/a-a4l5nun" frameborder="0" scrolling="no"></iframe>
  </div>
  <div class="hee-media__info">
    <div class="hee-media__reviews">
      <p> Page last reviewed: 01/01/2021 </p>
      <p> Next review due: 01/01/2022 </p>
    </div>
  </div>
</div>