1. ヘルプセンター
  2. 動画の埋め込み方法について

動画をWebページに埋め込む方法について

このページでは、動画をWebページに埋め込むためのコードの入力方法を説明します。

全てのWebサイトはHTMLで記述されています。自社のWebサイト開発チームがWebページを構築する場合でも、外部委託をされている場合でもWebサイトを構成するコンテンツはブロック単位でコードが書かれています。

一般的にWebサイトは、以下のような構成要素のセクションに分解することができます。

ヘッダー:ページの最上部
フッター:ページの最下部
サイドバー:Webページの情報を他コンテンツ毎に誘導したり、追加情報に誘導するバー
ボディ:ページのメインコンテンツ

イメージ:Webページのデザインと上記セクションの関係性を示した図

補足:ボディ部分は以下のようなコンテンツブロックに分けられます。


パラグラフ:メインボディの文章
画像や動画:コンテンツをイメージしやすくする
表:文章の内容を分かりやすく表現したもの
ヘッドライン:各コンテンツの内容を分かりやすく、目を引くように記述した見出し

多くのWebサイト構築ソフト(CMS)は、あなたのWebサイトを視覚的にデザインする幅広いテンプレートを持っており、クリック、ドラッグ&ドロップで直感的にWebサイトを構築できます。Webページ開発ではHTML、CSSというコードを用いてコンテンツを管理しています。

既存のWebページに新しいコンテンツを追加したい場合は、必要なコードをコピーして”Embedding”と呼ばれるHTML内の適切な場所にコードを組み込む作業を行います。

Webページ内でFirework動画コンテンツを挿入したい場所のHTMLブロックにFireworkで生成させるコードを差し込みます。そのため、Firework動画コンテンツ用のHTMLコードを都度記述する必要はありません。

Step1:プレイリストのHTMLコードの生成
Fireworkにログイン
チャンネルからWebページで公開する動画が入ったプレイリストを選択
選択したプレイリスト画面の右上にある ボタンをクリック。
プレイリストを表示するレイアウトを4つの中から選択。
レイアウトによっては、動画の表示回数や動画のミニプレーヤー表示位置などが選択可能です。全ての選択が終わると、HTMLコードが生成されます。


Step2:Step1で生成されたコードを「コードをコピーする」でコピーします。
✴︎コードのボックス内を選択してコピーすると選択漏れがあるので、必ず「コードをコピーする」を使用してください。

Step3:Step2でコピーしたコードをWebサイトに組み込みます

HTMLコード内の動画を再生させたいボディブロック内の上か下にコードを貼り付けます。
ストーリーブロック、グリッド、カルーセルは、Webページのボディに組み込まれるようにデザインされています。ページ訪問者がスクロールして見ていくページコンテンツの一部として見られます。

フローティングプレーヤーは、どのようなページであっても常にプレーヤーが起動します。
コードを貼り付けてセーブし、Webページを更新すると動画コンテンツが表示されます。


以下は、参考としてWordpressを使用した場合の標準的なコード貼り付け方法をご紹介します。

WordPressの新しいページを作成します。
Type / to choose a blockと表示されたところの黒いボタンをクリックします。

カスタムするHTMLコードを挿入するためのHTMLを検索します。

動画を挿入したいコンテンツブロックにHTMLコードを貼り付けます。
プレビュー選択では挿入した動画のコンテンツは表示されませんが、通常のページ表示をさせることで動画を挿入した時のページを確認できます。