Image card example

Youtube video

Given a Youtube video id, the image card will render a Youtube embed instead of an image. If Javascript fails to execute for any reason, then a fallback link to the Youtube video will be rendered instead.

Youtube does not support embeds on Internet Explorer versions lower than 10. In addition, Youtube’s website will block any version of Internet Explorer using it. There is therefore no fallback for IE9 and lower.

How it looks (preview)

14 June 2017 — Announcement

Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.

• Link to video transcript

The vision for GOV.UK

How to call this example

<div class="govuk-!-width-full">
  <%= render "govuk_publishing_components/components/image_card", {
  youtube_video_id: "XnP6jaK7ZAY",
  href: "/still-not-a-page",
  youtube_video_alt: "The vision for GOV.UK",
  context: {
    date: "2017-06-14 12:30:00 +0100",
    text: "Announcement"
  },
  description: "Following a news report that something has happened, further details are emerging of the thing that has happened and what that means for you.",
  extra_details: [
    {
      text: "Link to video transcript",
      href: "/1"
    }
  ]
} %>
</div>