ホーム > マイ・ホームページにYouTube動画を埋め込む方法 > ホームへ戻る

マイ・ホームページにYouTube動画を埋め込む方法

ネットワーク
network

レンタルサーバーでYouTube動画を共有する

レンタルサーバーでYouTube動画をウエブサイトに埋め込むには、初めにYouTube動画で動画を を共有する際に表示される埋め込みコードをコピーし、そのコピーを ウエブサイトのHTMLに貼り付ける必要があります。

目次

(基本) YouTube動画を埋め込む方法

(応用) YouTube動画をカスタマイズする方法

 ≫動画のサイズを変更する

 ≫自動再生させる

 ≫開始位置と終了位置を指定する

 ≫関連動画を自社チャンネル内に限定する

 ≫終了時に他の動画を自動再生する

 ≫コントロール(操作機能)非表示にする

 ≫全画面表示ボタンを非表示にする

 ≫繰り返し再生(ループ)させる

YouTube動画をホームページに埋め込むメリット

 ≫動画そのもののメリット

 ≫動画のアップロード先にYouTubeを使用するメリット

YouTube動画の埋め込みに関する注意点

 ≫侵害してしまう恐れ

 ≫広告が表示されてしまうおそれ

 ≫ページの読み込み速度が遅くなるおそれ

 (基本) YouTube動画を埋め込む方法

 基本として、ホームページにYouTube動画を埋め込む方法を説明します。

この記事で紹介するのは、【 埋め込みコードをコピーして、ホームページのHTMLに貼り付ける方法 】です。

この方法ですと、WordPressはもちろん、さまざまなホームページの作り方にも対応できることでしょう。

 埋め込みたいYouTube動画にアクセス

 それでは、埋め込みたいYouTube動画にアクセスしましょう。

埋め込みたいYouTube動画にアクセス。
スマートホン、タブレット、パソコンで表示確認された

 共有をクリック

 動画の下にある【 共有 】をクリックしてください。

共有をクリック。
スマートホン、タブレット、パソコンで表示確認された

 埋め込むをクリック

 【 埋め込む 】をクリックしてください。

埋め込むをクリックしてください。
スマートホン、タブレット、パソコンで表示確認された

 埋め込みコードをコピー

 右下の【 コピー 】をクリックして、埋め込みコードをコピーします。

埋め込みコードをコピー。
スマートホン、タブレット、パソコンで表示確認された

 埋め込みコードをホームページにペースト

 埋め込みコードをホームページにペースト【 貼り付け 】します。

ワードプレスの場合は下記の通り

埋め込みコードをコピー。
スマートホン、タブレット、パソコンで表示確認された

 【 カスタム HTML 】

 ワードプレスの場合

【 カスタム HTML 】
スマートホン、タブレット、パソコンで表示確認された

 実際のページを確認

 画面右上にある【 下書き保存 】もしくは 【 公開 】をクリックしたのち、【 プレビュー 】アイコンから実際のページを確認してみましょう。

実際のページを確認
スマートホン、タブレット、パソコンで表示確認された

 動画が埋め込まれていたら完了です。

 以下のように動画が埋め込まれていたら完了です、再生できるかを確認してください。

実際のページを確認
スマートホン、タブレット、パソコンで表示確認された

 ワードプレスの場合の注意点

 以下のはワードプレスの場合です。注意するところがありますので、

ワードプレスの場合の注意点
スマートホン、タブレット、パソコンで表示確認された

 (応用) YouTube動画をカスタマイズする方法

 ここからは、ホームページに埋め込んだYouTube動画をカスタマイズする方法を説明していきましょう。

 (応用) YouTube動画をカスタマイズする方法
スマートホン、タブレット、パソコンで表示確認された

 カスタマイズする方法

 関連動画の非表示は2018年以降出来なくなりました。

カスタマイズする方法
スマートホン、タブレット、パソコンで表示確認された

 パラメータの追加【 付与 】

 パラメーターとは、URLの末尾につける変数のこと、よう注意が必要です。

 パラメータの追加【付与】
スマートホン、タブレット、パソコンで表示確認された

 動画のサイズを変更する

縦幅と横幅の変更、値を指定します。

動画のサイズを変更する
スマートホン、タブレット、パソコンで表示確認された

 自動再生させる

自動再生、パラメーター【 autoplay 】を追加してください。

自動再生させる
スマートホン、タブレット、パソコンで表示確認された

 開始位置と終了位置を指定する

 指定にはパラメーター【 start 】と【 end 】を使用してください。

開始位置と終了位置を指定する
スマートホン、タブレット、パソコンで表示確認された

 関連動画を自社チャンネル内に限定する

 関連動画の非表示は、2018年以降出来なくなりました、その為に、関連動画を自社チャンネル内に限定する事が代替え案となります。   関連動画を自社チャンネル内に限定するには、パラメーター【 rel 】を使用して下さい。

関連動画を自社チャンネル内に限定する
スマートホン、タブレット、パソコンで表示確認された

 終了時に他の動画を自動再生する

 終了時に他の動画を自動再生するには、パラメーター【 playlist 】使用してください。

複数指定する場合は【( 、)カンマ 】で区切ります。

終了時に他の動画を自動再生する
スマートホン、タブレット、パソコンで表示確認された

 コントロール(操作機能)を非表示にする

 プレイヤーコントロールを非表示にするには、パラメーター【 controls 】を使用して下さい。

コントロール(操作機能)を非表示にする
スマートホン、タブレット、パソコンで表示確認された

 全画面表示ボタンを非表示にする

 全画面表示ボタンを非表示にするには、パラメーター【 fs 】を使用して下さい。

全画面表示ボタンを非表示にする
スマートホン、タブレット、パソコンで表示確認された

 繰り返し再生させる(ループ)させる

 繰り返し用には【 loop 】と、対象動画を指定する【 playlist 】パラメーターを使用して下さい。

繰り返し再生させる(ループ)させる
スマートホン、タブレット、パソコンで表示確認された

ここまで、基本から応用まで

 ユーチューブ動画はメリットも多く有りますが、注意点もあります

正しく閲覧していきましょう。

関連リンク

  • モノづくり Debut ダウンロードページ
  • テーマ選定デモページ

お知らせ!

  • ポチのblog準備中です、お楽しみに。
  • モノずくりホームページ作成してます、お楽しみに、内容は(コンテンツ)6種類展開してます。
************************** **************************

ポチのプライベートコーナー

・ポチのブログ作成中です・ ************************** **************************

ページの先頭へ戻る