# tableberg/1.1.5/admin/src/components/YouTubeEmbed.jsx

Tableberg – Simple Gutenberg Table Block, version 1.1.5. 45 lines.

- Page: https://pluginprobe.com/plugins/tableberg/1.1.5/code/admin/src/components/YouTubeEmbed.jsx
- Raw: https://pluginprobe.com/plugins/tableberg/1.1.5/raw/admin/src/components/YouTubeEmbed.jsx
- Modified: 2026-09-16T03:30:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tableberg/1.1.5/code/admin/src/components/YouTubeEmbed.jsx#L10-L20`.

```jsx
import React, { useEffect, useState } from "react";

/**
 * YouTube embed component.
 *
 * @param {Object}       props         component properties
 * @param {string}       props.videoId video id
 * @param {number |null} props.width   embed width
 * @param {number |null} props.height  embed height
 * @class
 */
function YouTubeEmbed({ videoId, width = null, height = null }) {
    const [embedUrl, setEmbedUrl] = useState(null);

    const defaults = {
        width: "100",
        height: "100",
    };

    /**
     * useEffect hook.
     */
    useEffect(() => {
        const generatedEmbedUrl = `https://www.youtube.com/embed/${videoId}`;
        setEmbedUrl(generatedEmbedUrl);
    }, []);

    return (
        <div className={"tableberg-youtube-embed"}>
            <iframe
                width={width || defaults.width}
                height={height || defaults.height}
                src={embedUrl}
                title="YouTube video player"
                allow="picture-in-picture; web-share; fullscreen"
            ></iframe>
        </div>
    );
}

/**
 * @module YouTubeEmbed
 */
export default YouTubeEmbed;

```