YouTube動画を記事に埋め込む方法

全体的な手順

１、記事設定管理画面の「import.css」にYouTube埋め込み用コードを張り付ける。

２、記事作成画面のソースにてYouTube動画のURLを張り付ける。(<div class="movie-wrap">+コピーしたYouTube動画のURL)

３、プレビューにて動画が再生されるか確認する。

※アップデート後の会員サイトでの作成方法についてはこちらをご確認ください。

設定管理画面からYouTubeの動画視聴を可能にする方法

①テンプレート編集のアイコンを選択

画面左の項目一覧より、会員ページ→テーマ管理→テーマのページより、現在のテーマの画像下部にある、「テンプレート編集のアイコン」をクリックする。

②CSS一覧を選択

レイアウトテンプレート一覧ページのテーマ管理メニュー内にある、「CSS一覧」をクリック。

③「import.css」ファイルを選択する

フォルダ名/テーマファイル名の一覧から、「import.css」ファイルをクリック。

④YouTube埋め込み動画用のコードを挿入する

「import.css」を開くと、以下のようにコードが記載されています。

記載されているコードの最後部に以下の「YouTube埋め込み用コード」を挿入する。

(必ずしも最後部に挿入する必要はありませんが、挿入した位置が分かりやすいためオススメです。)

-YouTube埋め込み動画用コード-

/*YouTube埋め込み動画用*/

.movie-wrap {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

.movie-wrap iframe {

position: absolute;

top: 0;

left: 0;

width: 100% !important;

height: 100% !important;

}

↑ここまでをコピーして貼り付けてください。　

記事作成画面からソースにて動画のURLを挿入する方法

①YouTubeの動画からURLをコピーする

記事に埋め込みたいYouTube動画のURLをコピーします。

① 埋め込みたい動画を選択し、共有をクリックする。

② 共有をクリックした後は、埋め込むを選択する。(ここでコピーをクリックすると動画の再生が上手くいきません。)

③ 動画の埋め込み用のURLが出てくるのでコピーする。

②記事作成画面から動画を挿入するスペースをつくる

①記事の本稿で動画を掲載したい箇所を確認する。

②「ソース」を開く。

③該当の箇所をEnterで改行し、挿入スペースをつくる。(2行ほどの改行で問題ありません。)

③コピーしたURLの先頭に<div class="movie-wrap">

末尾に</div>を張り付ける。

記事のなかでYouTube動画を再生するためのコードを挿入します。そのコードが<div class="movie-wrap">になります。

イメージとしては、「<div class="movie-wrap">+コピーしたYouTube動画のURL」です。

-例-

<div class="movie-wrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/48F1gWUvk-Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

青文字で記載されているコードは、先ほどYouTubeからコピーしてきたURLになります。

上記のようにYouTubeでコピーした埋め込み用のURLの先頭に<div class="movie-wrap">、末尾に</div>を付け加えるだけで問題ありません。

④動画挿入スペースに<div class="movie-wrap">.....</div>を加えたURLを挿入する

① コピーしたYouTube動画のURLを張り付ける。

② YouTube動画のURLの先頭に<div class="movie-wrap">末尾に</div>を張り付ける。

→記事内でYouTube動画の再生が可能となります。

プレビュー画面にて動画再生を確認する

①プレビュー画面に移動し動画が再生されるか確認する

動画が再生される場合は以下のように表示されます。

②動画が表示されない場合

動画が再生されない場合は以下のように表示されます。

③動画がプレビュー画面にて再生できない原因

動画が再生されない原因は主に3つになります。ご確認頂きますと幸いです。

①記事設定管理画面の「import.css」にYouTube埋め込み用コードが張り付けられていない、もしくは正しく貼り付けられていない。

②YouTube動画のコピーしたURLが埋め込み用になっていない。

③記事作成画面のソースにてYouTube動画のURLを貼り付ける際に、<div class="movie-wrap">+コピーしたYouTube動画のURL+</div>の形式で張り付けていない。

Page updated

Report abuse