Reactでyoutubeのタグを埋め込む方法

Reactでyoutubeのタグを埋め込む方法

ReactでYouTubeの動画を埋め込むには、YouTubeの埋め込みURLを使ってiframeタグを利用する方法が一般的です。
以下はその具体的な手順です。

1. YouTubeの埋め込みURLを取得する：

• YouTube動画のページで「共有」ボタンをクリックし、「埋め込み」オプションを選択します。
• 埋め込みコードが表示されるので、その中のsrc属性にあるURLをコピーします。

2. Reactコンポーネントにiframeを追加する：

• 複数箇所で使用できるよう、共通コンポーネントとして作成しています。

import React from 'react';

// コンポーネント名は任意の命名で大丈夫です。
const YouTubeEmbed = ({ embedId }) => {
  return (
    <div className="video-responsive">
      <iframe
        width="560"
        height="315"
        src={https://www.youtube.com/embed/${embedId}}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        title="Embedded youtube"
      ></iframe>
    </div>
  );
};

export default YouTubeEmbed;

3. YouTubeEmbedコンポーネントを使用する：

import React from 'react';
import YouTubeEmbed from './YouTubeEmbed';

const App = () => {
  return (
    <div>
      <h1>My YouTube Video</h1>
      <YouTubeEmbed embedId="YouTube動画のID" />
    </div>
  );
};

export default App;

上記の例では、YouTube動画のIDは、例えば、https://www.youtube.com/watch?v=XXXXXXXXXXの場合、IDはXXXXXXXXXXに置き換えてください。

このようにして、ReactアプリケーションにYouTube動画を埋め込むことができます。

iframeを含んだコンポーネントを再レンダリングされないようにする

iframe内のYouTube動画が他のイベントによって再レンダリングされると、動画は最初から再生されることになります。
これは、iframeが再レンダリングされると、新しいDOM要素として扱われ、YouTubeのプレイヤーも再初期化されるためです。

これを避けるために、再レンダリングを防ぐためのいくつかの工夫を行うことができます。
例えばReact.memoやuseMemoを使用することで、コンポーネントが不要な再レンダリングをしないようにすることができます。

以下はその具体的な方法で、いずれもembedIdが変更されない限りは再レンダリングされません。

1. React.memoを使用する

import React from 'react';

const YouTubeEmbed = React.memo(({ embedId }) => {
  return (
    <div className="video-responsive">
      <iframe
        width="560"
        height="315"
        src={https://www.youtube.com/embed/${embedId}}
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowFullScreen
        title="Embedded youtube"
      ></iframe>
    </div>
  );
}, (prevProps, nextProps) => prevProps.embedId === nextProps.embedId);

export default YouTubeEmbed;

2. useMemoを使用する

import React, { useMemo } from 'react';

const YouTubeEmbed = ({ embedId }) => {
  const iframe = useMemo(() => (
    <iframe
      width="560"
      height="315"
      src={https://www.youtube.com/embed/${embedId}}
      frameBorder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowFullScreen
      title="Embedded youtube"
    ></iframe>
  ), [embedId]);

  return (
    <div className="video-responsive">
      {iframe}
    </div>
  );
};

export default YouTubeEmbed;

これらの手法を用いて、YouTube動画が再生中に不要な再レンダリングを防ぎ、動画が最初から再生されるのを防ぐことができます。