Skip to main content

Embed videos

Updated Mar 13, 2025 ·

Using react-player​

Install​

  1. Install react-player.

    • Use NPM to install:

      npm install react-player

    • Verify:

      cat package.json | grep react-player

      Output:

      "react-player": "^2.16.0"

    • Other way to verify:

      npm list react-player

      Output:

      joeden@0.0.0 /mnt/c/Git/joeden
      └── react-player@2.16.0

  2. Import it at the top of your markdown file (.md or .mdx).

    Add the line below the Front Matter section, like this:

    ---
    title: "Embed videos"
    sidebar_position: 15
    description: "Resources, bookmarks"
    tags: 
    - Docusaurus
    # last_update:
    #   date: 7/14/2024
    ---

    import ReactPlayer from 'react-player'

  3. Add the URL to the page.

    <ReactPlayer 
        controls
        url='https://www.youtube.com/watch?v=XGxIE1hr0w4' 
        width='100%'
        height='100%'              
    />

  4. Sample:

    Unindented:

  • Indented:

Play controls​

To add play/pause button, plus other video settings, include controls:

<ReactPlayer 
    controls
    url='https://www.youtube.com/watch?v=XGxIE1hr0w4' 
/>

Auto-Play​

To make videos auto-play, add playing:

<ReactPlayer 
    playing
    controls
    url='https://www.youtube.com/watch?v=XGxIE1hr0w4' 
/>

Modify Style (Customize)​

ReactPlayer is a component, it does not expose a .react-player class by default. It is not a raw div, so it cannot be styled directly. The correct way would be to wrap it in a container (or inside a div) and then control the styles there.

  1. Create a src/components/ReactPlayerWrapper.js

    import React from 'react';
    import ReactPlayer from 'react-player';

    const ReactPlayerWrapper = (props) => {
        return (
            <div className="video-container">
                <ReactPlayer {...props} />
            </div>
        );
    };

    export default ReactPlayerWrapper;

  2. In your markdown, import the wrapper and reference it.

    import ReactPlayerWrapper from '@site/src/components/documentation/ReactPlayerWrapper';

    <ReactPlayerWrapper 
        controls
        url='https://www.youtube.com/watch?v=XGxIE1hr0w4' 
    />

  3. You can now style the component in a separate CSS or SCSS file, like this:

    // Video player section
    .video-container {
    max-width: 100%;
    width: 100%;
    height: auto;
    }

    .video-container > div {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    }

Using iframe​

An alternative way which does not require any additional package is through the use of iframe:

<iframe 
  width="560" 
  height="315"
  src="https://www.youtube.com/embed/XGxIE1hr0w4?si=acocw4T3zdTqd3V-" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen
></iframe>

Note that "full screen mode" is not allowed when using this.

Reference​