Introduce ability to embed a playable video on section front pages

[StephenAbbott]

Our team at Open Ownership would like to experiment with embedding Wagtail-hosted video files into section front pages so that these video files can be played in situ by users (auto-play should not be enabled).

Ideally we'd like to introduce the ability to add an embedded video file which would be playable from a section front page by being added to the Highlight pages component although we appreciate

Here is a current example of how we use that component on our Impact section front page:

If possible, the video should embed above the title of a content page and the description of that content so that it is associated with a piece of content but appears instead of an image.

If embedding Wagtail-hosted video files could not be added to such a slot, we would be OK with finding the best solution to a embed YouTube video in a similar position.

Please let me know your thoughts on this and what the estimate would be for adding this enhanced feature.

[philgyford]

@StephenAbbott To clarify – in your screenshot would you want blocks that would look the same as both of those shown, except with videos where the images are?

And do you currently have anywhere on the site where you use Wagtail-hosted videos? I think the Embed block uses YouTube etc videos?

[StephenAbbott]

@philgyford Just a single embedded video to replace the image on the left please.

I've done a little hunting and you're totally right that there isn't a Wagtail video option that we can use, just the embed component where we have - to date - only used YouTube videos.

Is it possible to use the embed component on a section front page in this way if we embed a YouTube video?

[philgyford]

I've had a first stab at this.

For each page in a "Highlight pages" block, I've added an optional Embed field (I have slightly different content on my dev site):

If present, that embed will be used in place of the page's image:

Caveats/questions:

1. The embed field is present for every page in the "Highlight pages" block, no matter what orientation is selected for "Card format". I don't think it's simple to change that in the Wagtail interface so that the field's only present if "Landscape" is selected for the format. Is that OK?
2. Consequently, at the moment, the embed will render even if the card is in Portrait format. I could change the template so that the embed is only used if the card is Landscape?
3. As well as the Section front pages, the "Highlight pages" block is also used on the Home page, and in the "Additional content" part of many other pages. Is that OK, with the addition of the embed? It would be possible to create a new version of the "Highlight pages" block that would only be used on the Section front pages, but that would mean replacing the current blocks there, and I think you'd have to re-do the Highlight content on those front pages.

So, I've done the simplest version at the moment, and there are varying optional degrees of making it more controlled/specific. What do you think?

[philgyford]

@StephenAbbott Just realised I didn't @ you on this, sorry. I wanted to check how the above sounded to you.

[StephenAbbott]

@philgyford Thanks. I saw the comment any way and have been checking with colleagues to get answers to your questions.

On (1), it is fine if the embed link shows up when either landscape or portrait orientations are selected.

On (2), yes please go ahead and only use embed if card = Landscape.

On (3), understood that this change will affect versions of the same component on other parts of the website. No need to create a new version of "Highlight pages" block.

A further question: can the size of the YouTube embedded video be increased on our side? Or is that being set by YouTube? I'm wondering if it would be possible to have the video embed be the full width of the highlighted blue section of the block with the title and description text then appearing under the video?

[philgyford]

@StephenAbbott I'm not working on this today, and my dev site is currently a bit broken! So I'm making this note for what to do for (2) for future-me or whoever else finishes this off.

What to do to make the embed only show for "landscape" cards:

1. In app/templates/_partials/card.jinja, line 5, change {% if page.card_embed %} to {% if page.card_embed and page.specific.card_format == 'landscape' %}
2. To make the behaviour clearer: In app/modules/content/blocks/stream.py, in the HighlightPagesBlock class, I would tweak the help_text of the EmbedBlock() definition to "Optional, replaces the page's image. Only appears if format is Landscape.".
3. makemigrations and migrate

Regarding the embed size: The embed currently appears the same size as an image would in the same card, because that's the space available in the card horizontally (unless I've misunderstood you). If you wanted a larger embed I think you'd need a new format of card, e.g. Still 2/3 of the page width, with the embed/image as wide as the card, and the headline and text beneath it.