Add Support for Product Videos

[rain2o]

What is the motivation for adding / enhancing this feature?

Magento 2 supports the ability to add videos in the product gallery. While editing the product you can add a video using a URL from YouTube or Vimeo. Vimeo is supported by default, but you need API key for YouTube to work. Magento uses the API to pull in the title, description, and a placeholder image for the video.
On the front-end of Magento's Luma theme it simply displays the video placeholder image as a product image in the gallery with a "play" icon over it. Once clicked the embedded video is displayed and played.

There are additional configurations available such as auto-starting the video, auto re-starting the video, and showing related videos.

What are the acceptance criteria

• Videos are available in the product gallery to be played using the video_url provided
• Placeholder images are used in place of videos until user interacts to initiate playback.

Can you complete this feature request by yourself?

Yes / Possibly.

Additional information

If anyone else takes this on before I get the chance, here is a sample JSON that is returned from the media API which contains an image, a YouTube video, and a Vimeo video.

[
    {
        "id": 3423,
        "media_type": "image",
        "label": null,
        "position": 1,
        "disabled": false,
        "types": [
            "image",
            "small_image",
            "thumbnail",
            "swatch_image"
        ],
        "file": "/s/h/shop_home_we_1.jpg"
    },
    {
        "id": 3431,
        "media_type": "external-video",
        "label": null,
        "position": 2,
        "disabled": false,
        "types": [],
        "file": "/h/q/hqdefault_1.jpg",
        "extension_attributes": {
            "video_content": {
                "media_type": "external-video",
                "video_provider": "",
                "video_url": "https://youtu.be/M7R0bQHilgw",
                "video_title": "Storefront Cloud - Technical Overview",
                "video_description": "Storefront Cloud is a Mobile-first eCommerce Platform that helps you build engaging user-experience across all platforms and devices. Get focus on client interactions without any changes on the backend.\r\n\r\n\r\nStorefront Cloud Platform combine features offered by most modern browsers with the benefits of the native mobile experience, to give your business a significant profits.\r\n\r\nPowered by:\r\n\r\nProgressive Web Apps (PWA) \r\nAccelerated Mobile Pages (AMP) \r\nOpen Loyalty Platform \r\n\r\n\r\nPWA is a Web application which behaves the same way like the native:\r\n\r\n- can be used without the internet connection,\r\n\r\n- like an app - is blazingly fast,\r\n\r\n- can be added to Home screen but without installation process,\r\n\r\n- in contrast to Apps is linkable - easy to share,\r\n\r\n- offers the same UX and UI like native apps, with push notifications etc.\r\n\r\n\r\nSo, our goal was to create Mobile-first, Offline-first eCommerce app which will be:\r\n\r\n- Fault tolerant - because it can work even without Internet access, it can run without any central servers - there is no such traffic peak that will kill the service,\r\n\r\n- We're to use all the PWA benefits - app manifest to install it on the home screen, use Service Workers to cache data etc. More on that later!\r\n\r\n- Would be great if we can achieve the response times within few dozen milliseconds per interaction,\r\n\r\n- The storefront is also designed to be platform agnostic - so to be able to integrate the same way with Magento, Pimcore, Shopify Plus or other platforms.\r\n\r\n\r\n\r\nFollow Storefront Cloud Online Here:\r\n\r\nWebsite: https://storefrontcloud.io\r\nCo-Founders:\r\nhttps://twitter.com/piotrkarwatka\r\nhttps://twitter.com/filrakowski",
                "video_metadata": ""
            }
        }
    },
    {
        "id": 3432,
        "media_type": "external-video",
        "label": null,
        "position": 3,
        "disabled": false,
        "types": [],
        "file": "/7/2/724617781_640.jpg",
        "extension_attributes": {
            "video_content": {
                "media_type": "external-video",
                "video_provider": "",
                "video_url": "https://vimeo.com/289059028",
                "video_title": "Vue Storefront 2.0",
                "video_description": "New Vue Storefront branding",
                "video_metadata": ""
            }
        }
    }
]

[pkarw]

Great feature, go on! :)

[rain2o]

I will open related PRs in the other repos and link back to here.

[fouss]

I will work on it with him :)

[patzick]

Everything is merged. @rain2o can we somehow see it on test?

[rain2o]

@patzick I have added the videos to the Magento instance, so once a data pump is performed with the merged update then the videos should show up on the Luma Yoga 4 Life products (https://demo.vuestorefront.io/p/240-LV09/luma-yoga-for-life).