Youtube Player

Youtube Player#

warning

This is an experimental feature.

This component inserts the Youtube iframe player into your react application

Usage#

To use the react Youtube player component you have to import it from the reactjs-media module as YoutubePlayer

Example

import React from "react";
import { YoutubePlayer } from "reactjs-media";

const MyVideo = () => {
    return (
        <>
            <YoutubePlayer
                src="https://youtu.be/UZCO5k1Nu70"
                width={650}
                height={600}
                //you can pass in other props
            />
        </>
    );
};

Props#

List of the available props:

Note: Since this is an experimental feature we recommend right clicking on the video inorder to get the video url instead of copying from the browser address bar. Both work but there are some issuses incase of page reloads.

Prop	Type	Description
`src`	string: Required	This represents the url of the video
`title`	string: Optional	This is needed to prevent iframe warning in the terminal
`allowFullScreen`	Boolean: Optional	This will enable the fullsscreen button on the player
`className`	string: Optional	The can be placed incase you want to use it
`height`	string or number: Optional	The max height of the player
`width`	string or number: Optional	The max width of the player

important

Youtube player is only available in version 1.2.0 above if you want to use it then upgrade.

tip

In version 1.3.x we plan to improve the youtube player component and add a soundcloud and other players. If you are willing you can contribute to the projects on Github