[MTE-50] HTML5 video Component Created: 08/Oct/15  Updated: 27/Apr/16  Resolved: 23/Mar/16

Status: Closed
Project: Magnolia Templating Essentials
Component/s: None
Affects Version/s: None
Fix Version/s: 0.10

Type: Task Priority: Major
Reporter: Christopher Zimmermann Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 1.25d
Original Estimate: Not Specified

Attachments: PNG File video.png    
Issue Links:
Relates
relates to MTE-86 Video component dialog has no title Closed
dependency
depends upon MGNLUI-3620 Required field within a complex field... Closed
depends upon MGNLDEMO-92 Demo of video component (from dam) Closed
depends upon MGNLDEMO-148 Move video component to MTK Closed
Template:
Acceptance criteria:
Empty
Task DoR:
Empty
Release notes required:
Yes
Date of First Response:
Epic Link: LD: components + pages
Sprint: Basel 36
Story Points: 3

 Description   

A component to display videos.
It should behave similar to the component created for the demo, but have the additional features:

Responsiveness
The dialog should allow the option to scale the video responsively based on the width of the containing element.
For example the dialog could offer a select box "Fill container width" with the following options:

  • Do not scale.
  • Scale to fill container width (4:3)
  • Scale to fill container width (16:9)
    (But perhaps the aspect ratio's do not need to be specified, depending on the implementation)
    (This is the common approach for responsive video: http://coolestguidesontheplanet.com/videodrome/youtube/)

3rd party embeds
Because users will expect and want to include videos from youtube and vimeo, we should support this.
A switch field with radio-buttons should enable a user to choose between selecting an asset, or specifying an embed code:
Source:

  • Asset
  • Embed code

If the author chooses Asset - then they see a link field.
If the author chooses Embed code - then they see a multiline text entry field.
A parameter "sourceDefault", allows a developer to choose which option is selected by default.

Of course the other fields apply to both of these sources. (Like the poster image, and whether the width is responsive.)

The implementation of the video component in the demo should be removed and replaced with this one.

The css required for the responsive sizing should be included in a css file:
mtk/webResources/css/video.css



 Comments   
Comment by Philip Mundt [ 14/Mar/16 ]

Added CSS file mtk/css/styles.css also has be added to cssFiles of page template definiton mtk/templates/pages/basic.yaml.

Comment by Philip Mundt [ 15/Mar/16 ]

CSS styles for caption/credits comes with default font-color black. Black on black doesn't work out well. This needs adjustment, I'd suggest font-color #ffffff aka white.

Aditionally, the rendered video tag (or embed code) always needs to be wrapped in a <div>, so either <div class="scalable-video"> or <div> in order for the caption to be displayed nicely (see rendering part in #macro video).

To try this out, use basic page template, add video, turn off scaling and add a caption & credits.

Generated at Mon Feb 12 07:40:58 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.