YouTubeを貼り付ける

1. YouTube 動画の「埋め込みコード」を取得します

» YouTube動画を埋め込むには (出展:YouTubeヘルプ)

動画を他のウェブサイトやブログに埋め込む方法は次のとおりです

  1. 動画の下にある [共有] ボタンをクリックします。
  2. [埋め込みコード] ボタンをクリックします。
  3. その下に表示されるボックス内のコードをコピーします。
  4. そのコードをブログやウェブサイトに貼り付けます。 

2. 埋め込みコードを貼り付けます

  1. YouTubeの埋め込みコードコピーします
  2. エディタの「HTML貼付」ボタンから、貼り付けのダイアログを開きます。
  3. 「HMTLコードを貼り付け」のタブを選択して、貼り付けします

 

Tips 動画を中央に配置する

  1. 「レイアウト」ボタンをクリックし、「1列」を選択します。
  2. 枠が作成されるので、中の「画像や表」という文章を消します。
  3. 枠内をクリックし、右部の「横幅の設定」を「100%」にします。
  4. 枠内を選択した状態で「HTML貼付」ボタンから貼り付けのダイアログを開き、「HTMLコードを貼り付け」のタブを選択し、「YouTubeの埋め込みコード」を貼り付けます。
  5. 貼り付けた「Block Plug-in」をクリックし、上部の中央揃えボタンをクリックします。
コードビューによる記載例
#style(float_left,center,width=100%){#html(){<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>}}
#clear()

Tips 動画を並べて表示する

  1. 「レイアウト」ボタンをクリックし、「2列」を選択します。
  2. 枠が作成されるので、中の「画像や表」という文章を消します。
  3. 枠内をクリックし、右部の「横幅の設定」を「50%」にします。
  4. 枠内を選択した状態で「HTML貼付」ボタンから貼り付けのダイアログを開き、「HTMLコードを貼り付け」のタブを選択し、「YouTubeの埋め込みコード」を貼り付けます。
  5. 貼り付けた「Block Plug-in」をクリックし、上部の中央揃えボタンをクリックします。
  6. 縦横比を維持したまま動画の横幅を枠内いっぱいにするために、「Block Plug-in」 を選択した状態で右部の「拡張」の「width="560"」を「width="100%"」に、「height="315」を「height="auto"」に書き換えます。
コードビューによる記載例
#style(float_left,width=50%){#html(){<iframe width="100%" height="auto" src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>}}
#style(float_left,width=50%){#html(){<iframe width="100%" height="auto" src="https://www.youtube.com/embed/動画ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>}}
#clear()