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)
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.
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 11:30:00 +0000",
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>