SAMPLE IMAGE この画像は差し替えてご利用ください

D30 Jimdo で動画を表示する

Jimdo では YouTube をはじめとする、さまざまな動画サイトにアップロードされた動画を挿入して表示しすることができます。

ここでは、Jimdo に YouTube にある動画を組み込む方法を紹介します。以下の操作を順に行います。

D30-1 YouTube にある動画の URL をコピーする

➊ YouTube にログインする

ログイン完了画面

jdgD32:YouTube にログイン
jdgD32:YouTube にログイン

Google アカウントで、YouTube にログインする

 

 YouTube「ホーム」が表示さる

➋「動画の管理」画面を出す

1)「クリエィターツール」を表示する

jdgD56:「クリエィターツール」を選択する
jdgD56:「クリエィターツール」を選択する

① アバター(Google アカウントのアイコン)」をクリックし、

 

クリエィター ツール」をクリックする

2)「動画の管理」画面を表示する

jdgD57:「動画の管理」を選択する
jdgD57:「動画の管理」を選択する

 動画の管理」をクリックする

➌ 動画の「埋め込みコード」をコピーする

1)動画を選ぶ

jdgD67:YouTube 動画を選択する
jdgD67:YouTube 動画を選択する

「動画の管理」画面で、動画のサムネイル画像を選び、クリックする

2)動画が再生を始める。

3)[共有]をクリックする。

jdgD68:YouTube 「共有」
jdgD68:YouTube 「共有」

 下にスクロールして[共有]アイコンをクリックします。

4)「埋め込みコード」での共有を設定する

jdgD69:YouTube 「共有」 埋め込みコード
jdgD69:YouTube 「共有」 埋め込みコード

埋め込む」を選ぶ。

5)「埋め込みコード」のオプションを設定する

jdgD75:YouTube 「共有」 埋め込みコードとオプション(その1)
jdgD75:YouTube 「共有」 埋め込みコードとオプション(その1) 

埋め込みコードが表示される。

 

画面を下方へスクロールし、埋め込みオプションを表示する。

jdgD70:YouTube 「共有」 埋め込みコードとオプション(その2)
jdgD70:YouTube 「共有」 埋め込みコードとオプション(その2) 

「動画が終わったら関連動画を表示する」のチェックを外し、

 

コピー]をクリックし、埋め込みコードをクリップボードにコピーする。

動画が終わったら関連動画を表示する

動画の再生終了後、関連動画を表示するかどうかを決める。チェックを外すと、関連動画が表示されない。

❹ 動画をJimdoページに挿入するには、次の「YouTube から動画を挿入する」へ進む。

D30-2 YouTube から動画を挿入する

「YouTube等」でコードを入りつけた場合

「+コンテンツを追加」で「ウィジェット/HTML」ではなく、「YouTube等」でコードを貼り付けると、「動画が終わったら関連動画を表示する」のオン/オフのコントロールが効かず、常に関連情報が表示されてしまう。「ウィジェット/HTML」で貼り付ける場合はコントロール通りの表示になる。

➊ 挿入する動画の URL をコピーする

➋ Jimdo ページを開く

➌ YouTube をコンテンツとして追加する

1)「コンテンツを追加」>「その他コンテンツ」[ウィジェット/HTML]

jdgD45:「コンテンツを追加」で「ウィジェット」を選ぶ
jdgD45:「コンテンツを追加」で「ウィジェット」を選ぶ

コンテンツを追加」で、

 

「その他コンテンツ」にある

 

ウィジェット/HTML]を選ぶ

2)コピーした動画のコードを貼り付ける

jdgD47:動画のURLを貼り付ける
jdgD47:動画のURLを貼り付ける

④ コピーした動画のコードを貼り付けて、

 

保存」する

❹ 表示サイズや位置を調整する

jdgD48:動画表示サイズや位置の調整
jdgD48:動画表示サイズや位置の調整

1)表示を中央揃えとする

ウィザード/HTML]でYouTubeのコードを埋め込んで表示すると、表示は左寄せとなる。これを中央揃えにするには、埋め込みコードを次のように変更する。

<div style="margin: 0 auto; width: ○○px;">埋め込みコード</div>

とする。○○は、埋め込みコードに記述されている width=〇〇の〇〇と同じ値とする。以下はその手順である。

 

 [ウィザード/HTML]で「埋め込みコード」を入力する

埋め込みコードの直前の行に以下を追加する

<div style="margin: 0 auto; width: 〇〇px;">

〇〇は、埋め込みコードに記述されている width="〇〇" の〇〇と同じ値。

ここでは、width="640" なので、width: 640px と入力する。

埋め込みコードの次の行に以下を入力する

</div>

jdgD73:YouTube の埋め込みを中央に表示する
jdgD73:YouTube の埋め込みを中央に表示する

保存]をクリックする

中央揃えで表示される。

jdgD74:中央揃えになったYouTube
jdgD74:中央揃えになったYouTube

2)横幅一杯に表示する

①「ウィザード/HTML」で埋め込みコードを挿入する

② コンテンツを挿入した位置の横幅を調べる

③ 埋め込みコードを変更する:

横幅(width)を幅一杯にし、高さ(height)は縦横比が崩れないよう値を計算して変更する

④[保存]する

URLをコピーするもう一つの方法

URLをコピーするには、上のステップ➌の1)で該当の動画のサムネイルをクリックすると動画がブラウザで表示されます。そのブラウザのURL値をコピーする方法でも良い。 

jdgD46:動画表示のURLをコピーする
jdgD46:動画表示のURLをコピーする