{"id":21157892,"url":"https://github.com/yhotta240/react-youtube-embed","last_synced_at":"2026-04-04T08:41:09.139Z","repository":{"id":236851710,"uuid":"793281670","full_name":"yhotta240/react-youtube-embed","owner":"yhotta240","description":"ReactでYouTube動画を埋め込むためのカスタムコンポーネント","archived":false,"fork":false,"pushed_at":"2024-04-29T17:01:14.000Z","size":206,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T15:27:06.321Z","etag":null,"topics":["component","css","html","javascript","json","nodejs","react","tailwindcss","youtube","youtube-embed","youtube-playlist","youtube-video"],"latest_commit_sha":null,"homepage":"https://react-youtube-embed.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yhotta240.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-28T22:49:15.000Z","updated_at":"2024-05-01T17:26:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"7ebaed5f-f057-4a57-873f-08c36a57d083","html_url":"https://github.com/yhotta240/react-youtube-embed","commit_stats":null,"previous_names":["yhotta240/react-youtube-embed"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yhotta240/react-youtube-embed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Freact-youtube-embed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Freact-youtube-embed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Freact-youtube-embed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Freact-youtube-embed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhotta240","download_url":"https://codeload.github.com/yhotta240/react-youtube-embed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhotta240%2Freact-youtube-embed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271755438,"owners_count":24815407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-23T02:00:09.327Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","css","html","javascript","json","nodejs","react","tailwindcss","youtube","youtube-embed","youtube-playlist","youtube-video"],"created_at":"2024-11-20T12:11:57.284Z","updated_at":"2025-12-30T20:06:34.305Z","avatar_url":"https://github.com/yhotta240.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## 概要\nReactでYouTube動画を埋め込むためのカスタムコンポーネントであるYoutubeEmbedを作成しました。このコンポーネントを使用することで、簡単にYouTube動画を表示し、アプリケーションに組み込むことができます。\n\n## コンポーネントの機能\n\n- YouTube動画の埋め込み\n- タイトルの表示\n- カスタムスタイリング（今回はTailwind cssを採用）\n- 動画情報のURLまたはビデオIDの両方に対応\n\n**対応している動画のURL形式について**\n```\nhttps://www.youtube.com/watch?v=VIDEO_ID　標準形式のURL\nhttps://youtu.be/VIDEO_ID　短縮URL\nhttps://www.youtube.com/embed/VIDEO_ID　埋め込みプレーヤーのURL\n```\n\n\n## デモ\n\nhttps://react-youtube-embed.vercel.app/\n\n\n## 使用例\n\n### Propsの説明\n| プロパティ名       | 説明                                                                              | タイプ           | デフォルト値 |\n|-------------------|-----------------------------------------------------------------------------------|------------------|--------------|\n| data              | YouTube動画の情報を含む配列。各要素はタイトルとURLまたはビデオIDを持つオブジェクト。   | array            | []           |\n| options           | YouTube動画の再生オプションを指定します。                                            | array            | []           |\n| maxWidth          | 埋め込みコンテナーの最大幅（ピクセル単位）。                                           | number           | 600          |\n| classContainer    | コンテナー要素に適用するカスタムクラス。                                               | string           | \"\"           |\n| classTitle        | タイトル要素に適用するカスタムクラス。                                                 | string           | \"\"           |\n| classIframe       | 埋め込みiframeに適用するカスタムクラス。                                               | string           | \"\"           |\n\n**optionsプロパティについて**\n| オプション   | 説明                           | デフォルト値 |\n|-------------|--------------------------------|--------------|\n| loop        | ループ再生回数（0または正の整数、0は無限ループ） | 1         |\n| mute        | ミュート（trueまたはfalse）         | false        |\n| inline      | インライン再生（trueまたはfalse）   | false        |\n| autoplay    | 自動再生（trueまたはfalse）         | false        |\n\n```react:App.js\nimport React from 'react';\nimport YoutubeEmbed from './YoutubeEmbed';\n\nconst App = () =\u003e {\n  // YouTube動画情報\n  const youtubeData = [\n    {\n      title: \"動画1\",\n      url: \"https://www.youtube.com/watch?v=videoId1\"\n    },\n    {\n      title: \"動画2\",\n      videoId: \"videoId2\"\n    }\n  ];\n  \n  // optionsプロパティ\n  const options = {\n    loop: 1,\n    mute: false,\n    inline: true,\n    autoPlay: true,\n    // width: 700,\n    // height: 400,\n  };\n  \n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eYouTube動画\u003c/h1\u003e\n      \u003cdiv className='m-4' \u003e\n        \u003cYoutubeEmbed\n          data={youtubeData}\n          options={options}\n          maxWidth={600}\n          classContainer={\"my-6 relative mx-auto \"}\n          classTitle={\"md:text-xl mb-2 font-bold\"}\n          classIframe={\"w-full aspect-video\"}\n        \u003e\u003c/YoutubeEmbed\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default App;\n\n```\n### YouTube動画情報の取得方法\n\nYouTube動画の情報を取得する方法は主に3つあります。以下に、JavaScriptオブジェクトとJSONを使用した静的なデータ表現、そしてAPIやデータベースを活用して動的に情報を取得する方法です。\n\n#### JavaScriptオブジェクト:\nJavaScriptオブジェクトを使用してYouTube動画の情報を表現する場合、静的なデータを直接コードに組み込みます。\n```React:youtubeData.js\nconst youtubeData = [\n  {\n    title: \"動画1のタイトル\",\n    url: \"https://www.youtube.com/watch?v=videoId1\"\n  },\n  {\n    title: \"動画2のタイトル\",\n    videoId: \"videoId2\"\n  }\n];\n```\n各要素は、YouTube動画の情報を表すオブジェクトです。各オブジェクトには、`title`プロパティには動画のタイトルが、`url`または`videoId`プロパティにはそれぞれYouTube動画のURLまたはビデオIDが含まれます。\n\n\n\n#### JSON形式:\nJavaScriptオブジェクトと同じ情報を持ちます。\n```json:youtubeData.json\n[\n  {\n    \"title\": \"動画1のタイトル\",\n    \"url\": \"https://www.youtube.com/watch?v=videoId1\"\n  },\n  {\n    \"title\": \"動画2のタイトル\",\n    \"videoId\": \"videoId2\"\n  }\n]\n\n```\nJSON形式のデータは、JavaScriptのオブジェクトとして解釈されることができます。\n\n#### APIやデータベースを使用:\nYouTube Data APIなどのAPIを使用すると、YouTubeから動画の情報を取得し、必要な情報を取得したり、検索したりすることができます。データベースを使用する場合は、動画の情報をデータベースに保存し、必要に応じてデータベースから取得します。\n\n\n## YoutubeEmbedコンポーネントの説明\nデフォルト値の設定とプロップスの使用\u003cbr\u003e\nクラスの適用とスタイリング\u003cbr\u003e\n動画情報の解析とビデオIDの取得\u003cbr\u003e\n\n```react:youtubeEmbed.js\nimport React from 'react';\n\n// YoutubeEmbedコンポーネント\n// props:\n// - data: 動画情報の配列。各要素は{ title: string, url?: string, videoId?: string }形式であり、urlまたはvideoIdのいずれかを含む。\n// - options: 動画再生のオプションを指定するオブジェクト。オプションは{ loop?: number, mute?: boolean, inline?: boolean, autoplay?: boolean }の形式で、デフォルトは空のオブジェクト\n// - maxWidth: コンポーネントの最大幅（デフォルトは600px）\n// - classContainer: コンテナーのクラス名（デフォルトは空文字列）\n// - classTitle: タイトルのクラス名（デフォルトは空文字列）\n// - classIframe: iframeのクラス名（デフォルトは空文字列）\n\nconst YoutubeEmbed = ({ data, options, maxWidth = 600, classContainer = \"\", classTitle = \"\", classIframe = \"\" }) =\u003e {\n  // 動画情報が提供されない場合のデフォルト値\n  const videoInfo = data || [];\n\n  return (\n    \u003c\u003e\n      {/* 動画情報のマップ */}\n      {videoInfo.map((video, index) =\u003e (\n        \u003cdiv key={index} className={`${classContainer}`} style={{ maxWidth: `${maxWidth}px` }}\u003e\n          {/* タイトル */}\n          \u003ch2 className={`${classTitle}`}\u003e{video.title}\u003c/h2\u003e\n          {/* 動画の埋め込み */}\n          \u003ciframe\n            width={`${options.width}`}\n            height={`${options.height}`}\n            className={`${classIframe}`}\n            title={video.title}\n            src={`https://www.youtube.com/embed/${getVideoId(video)}?${Object.entries(options).map(([key, value]) =\u003e `${key}=${value}`).join('\u0026')}`}\n            allow=\"accelerometer;  autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;\"\n            allowFullScreen\n          \u003e\u003c/iframe\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/\u003e\n  );\n};\n\n// 動画情報からビデオIDを取得する関数\nconst getVideoId = (video) =\u003e {\n  if (video.url) {\n    // URLが提供されている場合、ビデオIDを抽出\n    const videoIdMatch = video.url.match(/(?:https?:\\/\\/)?(?:www\\.)?(?:youtube\\.com\\/(?:[^/]+\\/.+\\/|(?:v|e(?:mbed)?)\\/|.*[?\u0026]v=)|youtu\\.be\\/)([^\"\u0026?/ ]{11})/);\n    return videoIdMatch ? videoIdMatch[1] : \"\";\n  } else if (video.videoId) {\n    // videoIdが提供されている場合、そのまま返す\n    return video.videoId;\n  } else {\n    return \"\";\n  }\n};\n\nexport default YoutubeEmbed;\n\n\n```\n\n\nhttps://github.com/yhotta240/react-youtube-embed\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhotta240%2Freact-youtube-embed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhotta240%2Freact-youtube-embed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhotta240%2Freact-youtube-embed/lists"}