メインコンテンツへスキップ

HTMLビルダーへのコンテンツの埋め込み

Aaron Ngai
  • 更新

HTMLビルダーでは、ページやニュース記事内にインタラクティブコンテンツやメディアコンテンツを直接埋め込むことができます。社内コミュニケーションと共に外部ツール、動画、ライブ配信を表示することで、コンテンツの補足情報や機能性、エンゲージメントを高めるのに役立ちます。

コンテンツの埋め込みは通常、iFrame（インラインフレーム）またはサードパーティサービスが提供する埋め込みコードを使用して行われます。

この機能は、PagesのレガシーHTMLビルダーまたはArticleビルダーを使用しているときに利用できます。

デバイス：作成にはデスクトップ、表示にはデスクトップとモバイルの両方

役割／権限：

  • システム管理者
  • 編集者
  • Global Pagesエディター
  • Spaceオーナー／Space管理者（Space記事用）

iFrameを使用したコンテンツの埋め込み

iFrame（インラインフレーム）とは、別のウェブサイトのコンテンツをページ内に直接表示できるHTML要素です。

ウェブページ、フォーム、ビデオ、インタラクティブツール、ダッシュボード、コラボレーションボードなどを埋め込むために使用できます。

iFrame（インラインフレーム）の追加方法

Screenshot_2023-05-30_at_18.00.35.png
  1. 編集したいページやニュース記事を開く。
  2. エディターでツールに移動。
  3. ソースコードを選択。
  4. 外部サービスから提供されたiFrame（インラインフレーム）または埋め込みコードを貼り付ける。
  5. 変更を保存。

埋め込んだコンテンツがページ内に表示されます。

iFrame（インラインフレーム）コードの例

ウェブページの埋め込みに使用されるベーシックなiFrame（インラインフレーム）の例はこちらです。

<p><iframe src="https://productportal.workvivo.com"width="100%" height="1000px" frameborder="0" marginwidth="0px" marginheight="0px" scrolling="yes" allowfullscreen="allowfullscreen" data-mobile-width="100%" data-mobile-height="1000px"></iframe></p>
  • src = "https://productportal.workvivo.com" - 結果このURLが埋め込まれます
  • width = "100%" - ページ／記事内で最大限の横幅になります
  • height="1000px" - 高さが1000ピクセルに設定されます
  • scrolling="yes" - iFrame（インラインフレーム）はスクロール可能で、固定表示になりません

注：モバイル向けには別のサイズパラメーター（data-mobile-widthとdata-mobile-height）がありますが、この例ではウェブ版と同じ寸法に設定しています。

Webビュー:

Screenshot 2023/05/30 at 17.56.56.png

モバイル表示:

IMG_2743.png

注:以下のエラーが発生した場合は、カスタマーエクスペリエンスプロジェクトマネージャーに連絡するか、ヘルプセンターからリクエストを送信してください。

Screenshot_2023-05-29_at_14.46.01.png

 

埋め込みコンテンツのカスタマイズ

外部ウェブサイトから表示されるコンテンツであるため、視覚要素の大部分はホストプラットフォームで管理する必要があります。

Workvivoでカスタマイズできない要素の例はこちらです。

  • 画像
  • 色・スタイル
  • ページレイアウト
  • サイトの応答性

ただし、以下のようないくつかの表示設定はWorkvivoで調整可能です。

  • 幅
  • 高さ
  • スクロール可能か固定表示コンテンツかどうか

ライブ配信やウェビナーの埋め込み

ライブ配信やウェビナーも、動画プラットフォームが提供する埋め込みコードを使用してページに埋め込み可能です。

これは、外部の放送やライブストリーム、ウェビナーの録画、ビデオアナウンスなど、Workvivoの外部にある可能性のあるコンテンツをホストする場合に便利です。

ライブストリームを埋め込む方法

  1. ライブ配信の動画を開く。
  2. 動画配信元からの埋め込みコードをコピー。


     
  3. ページを編集。
  4. [メディア挿入]アイコンをクリック。


     
  5. [埋め込み]を選択。
  6. 埋め込みコードを貼り付け。
  7. [保存]をクリック。

ライブ配信動画のフレームがページ内に表示されます。

 

動画フレームサイズの調整

埋め込まれた動画が小さすぎる場合、エディターで埋め込まれた動画をクリックし、メディア挿入ボタンを選択して、必要に応じたフレームの寸法に調整しメディアフレームのサイズを変更できます。

例えば、幅950、高さ549に変更します。

これによって、動画がページレイアウト内でより目立つように表示されます。

 

埋め込みコンテンツのトラブルシューティング

埋め込みコンテンツが正しく表示されない場合は、まずソースから埋め込みコードが正しくコピーされていることを確認してください。次に、外部ウェブサイトが埋め込みを許可していることを確認します。サイトによっては、コンテンツが他の場所に埋め込まれないようブロックしているためです。最後に、寸法がページレイアウトに適していることを確認してください。

引き続き問題が発生する場合は、ヘルプセンターからリクエストを送信してください。

この記事は従来のHTMLビルダーに関するものです。新しいブロックベースのページエディターを使用している場合は、ページにコンテンツを埋め込むを参照してください。

 

関連記事