MediaPlayer

This component allows a consumer to play audio or video embeds from the following services: YouTube, Vimeo, SoundCloud and Spotify.

Basic Usage


import { MediaPlayer } from '@krakentech/coral';
 
<MediaPlayer url="https://www.youtube.com/watch?v=hJ17RoZgwfk" />

Services

YouTube


<MediaPlayer url="https://www.youtube.com/watch?v=hJ17RoZgwfk" />

Vimeo


<MediaPlayer url="https://vimeo.com/578586673" />

SoundCloud


<MediaPlayer url="https://soundcloud.com/octopusenergy/ep-16-how-kraken-is-powering-a-transformation-at-octopus-and-beyond" />

Spotify


<MediaPlayer url="https://open.spotify.com/episode/1DNK1CyWKkvxmxpbiPvQGe" />

Unsupported

If an unsupported URL is given, the component will render the following message to warn of the issue.


<MediaPlayer url="https://player-widget.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&feed=%2Fdublab%2Fel-marchante-tizita-radio-071524%2F" />

MediaPlayer: Unsupported platform. Youtube, Vimeo and SoundCloud and Spotify are the platforms currently supported. Please provide a URL from one of those services to the "url" prop.

Properties

title


<MediaPlayer
    url="https://www.youtube.com/embed/shT9-qX_y-w"
    title="The title of the video."
/>

aspectRatio


<MediaPlayer
    url="https://www.youtube.com/embed/shT9-qX_y-w"
    aspectRatio="9/16"
/>

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`url`	`string` The URL of the media to display. Currently supports URLs from the following services: YouTube, Vimeo, SoundCloud, Spotify. Use the URL from the browser address bar when viewing the media on the respective platform’s website.
`title`	`string` The title of the media player.
`aspectRatio`	`AspectRatio` The aspect ratio of the media player.	`16/9`