Component Request - VideoEmbed - {x}hrs

[pghorpade]

Component Description

This new component is used in the screening block on Event detail page to display embedded video from craft cms content. The Embed HTML iframe src will be extracted from Craft trailer field

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=7%3A56
• Mobile: https://www.figma.com/file/ZT2qWKTlOxfhr1QUS2rFPL/UI-Pattern-Library-(Client-Facing)-Final?node-id=7%3A58](https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=13342-63252&t=VZc9aWHdAuThvLPa-0)

If no mobile designs provided, please use your best judgment for responsiveness.

Slots

Name and description of any slots needed.

Props

props: {

    trailer: {
        type: String,
        default: ""
    },

}

Developer Tips

List any developer tips here

1. FTVA craft example https://test-craft.library.ucla.edu/admin/entries/ftvaEvent/2847944-la-r%C3%A9gion-centrale-03-08-24

2. 

3. There will pareseTrailer computed method to parse src from this craft data

         "trailer": "<figure><iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/uYr_SvIKKuI?si=ihenbmyE91KqyXK5\" title=\"YouTube video player\" frameborder=\"0\"></iframe></figure>"

4. This is Codepen code link thank you @axamei
5. Update ResponsiveVideo to have this component as a named slot for ftva variation

Events

No events emitted

Child components

List out any components that are used by this new component. For example, if you are building a grid that is made up of block components.

no child components needed

Screenshots