Zendesk Guideの記事に動画を埋め込む方法：完全版2026年ガイド

ナレッジベースの記事に動画を追加すると、顧客の理解度が劇的に向上します。90秒のチュートリアルは、5段落のテキストで説明する内容を伝えることができます。ヘルプセンターにZendesk Guide（現 Zendesk Knowledge）を使用している場合、動画コンテンツを埋め込むための主なオプションは2つあります。サポートされているプラットフォーム向けのネイティブメソッドと、それ以外のすべてのプラットフォーム向けのカスタムHTMLです。

このガイドでは、両方のアプローチについて説明します。動画ホスティングプラットフォームに基づいて選択するメソッド、各アプローチの正確な手順、および途中で発生する一般的な問題の処理方法について説明します。また、eesel AIのような最新の代替手段がマルチメディアコンテンツをどのように異なる方法で処理するかについても見ていきます。

開始する前に必要なもの

始める前に、次のものが準備できていることを確認してください。

• Zendesk Knowledgeアカウント（Teamプラン以上）
• サポートされているプラットフォームでホストされている動画、または動画ホストからの埋め込みコード
• カスタムHTMLメソッドを使用する場合は、Guide設定への管理者アクセス
• どの埋め込みメソッドが自分の状況に適用されるかの明確なアイデア

ネイティブ埋め込みメソッドは、YouTube、Vimeo、Wistia、Loom、Figma/Jam、Synthesia、JWPlayer、Brightcove、Vidyardで動作します。動画が他の場所でホストされている場合は、カスタムHTMLアプローチが必要です。

方法1：ネイティブ動画埋め込み

これが最も簡単なアプローチです。URLを貼り付けると、Zendeskが残りを処理します。コードは不要で、セキュリティ設定を変更する必要もありません。また、安全でないHTMLを有効にする必要がないため、最も安全なオプションでもあります。

ステップ1：動画のURLをコピーする

まず、動画プラットフォームから共有可能なリンクを取得します。YouTubeの場合は、動画の下にある[共有]ボタンをクリックして、リンクをコピーします。他のプラットフォームの場合は、[共有]または[リンクをコピー]オプションを探します。

1つの重要な注意点：YouTube Shortsは現在サポートされていませんネイティブ埋め込みメソッドを使用します。Shortを埋め込む必要がある場合は、代わりにカスタムHTMLメソッドを使用する必要があります。

ステップ2：記事エディタを開く

Zendesk Knowledge管理パネルに移動します。左側のサイドバーにある[記事]をクリックし、新しい記事を作成するか、既存の記事を開いて編集します。

動画を記事本文に表示する場所にカーソルを置きます。これは重要です。動画がカーソルの位置に挿入されるためです。

ステップ3：動画を挿入する

エディタツールバーにある[動画を追加]ボタンを探します。従来のエディタでは、これは簡単なツールバーボタンです。新しい記事エディタでは、[記事コンポーネント]ボタンをクリックし、ドロップダウンから[埋め込み]を選択します。

動画のURLを要求するダイアログボックスが表示されます。ステップ1でコピーしたリンクを貼り付けます。Zendeskは動画のプレビューを自動的に生成し、正しい動画であることを確認できます。

[挿入]をクリックして動画を記事に追加し、[保存]をクリックします。動画が埋め込まれ、記事コンテンツとともにインラインで表示されます。

方法2：カスタムHTML埋め込み

ネイティブメソッドがオプションではない場合があります。動画がZendeskがネイティブにサポートしていないプラットフォーム（Viostreamなど）でホストされている可能性があります。または、分析のために動画の視聴回数を追跡する必要がある場合もあります。一部のプラットフォームでは、手動埋め込みコードでのみサポートされています。このメソッドを使用すると、より詳細な制御が可能になりますが、いくつかの追加の手順が必要です。

ステップ1：Guide設定で安全でないコンテンツを有効にする

デフォルトでは、Zendeskはサードパーティのスクリプトと特定のHTMLタグをブロックして、ヘルプセンターを悪意のあるコードから保護します。カスタム埋め込みコードを使用するには、この保護を無効にする必要があります。

Zendesk管理の[Guide]に移動し、[設定]アイコンをクリックします。[セキュリティ]セクションまでスクロールし、[安全でないコンテンツを表示する]というラベルの付いたチェックボックスをオンにします。[更新]をクリックして変更を保存します。

**重要なセキュリティに関する注意：**ナレッジベースに追加されるコンテンツのソースを信頼できる場合にのみ、この設定を有効にしてください。「安全でない」というラベルは、コンテンツ自体ではなく、HTMLの技術的な機能を表しています。評判の良い動画ホスティングプラットフォームからのコードを埋め込んでいる場合、リスクは最小限です。ただし、不明なソースからのコードを埋め込む場合は注意してください。

ステップ2：埋め込みコードを取得する

動画プラットフォームに移動し、埋め込みオプションを探します。これは通常、[共有]ボタンの下、次に[埋め込み]タブにあります。提供されているiframeコードをコピーします。

埋め込みコードは次のようになります。

<iframe src="https://player.vimeo.com/video/123456789" width="640" height="360" frameborder="0" allowfullscreen></iframe>

一部のプラットフォームでは、プレーヤーのサイズ、自動再生設定、コントロールの非表示など、埋め込みコードのカスタマイズオプションが提供されています。コピーする前に、これらを設定してください。

ステップ3：記事に埋め込みコードを追加する

Zendesk記事エディタに戻り、[ソースコード]ボタンをクリックしてHTMLビューに切り替えます。このボタンは通常、ツールバーに山かっこ（<>）で表示されます。

動画を表示するHTML内の場所を見つけます。そこに埋め込みコードを貼り付けます。動画を中央に配置したり、コンテナで囲んだりする場合は、iframeの周りに適切なHTMLを追加します。

[追加]または[更新]をクリックして、ビジュアルエディタに戻ります。動画が表示される場所にプレースホルダーが表示されます。記事を保存してプレビューし、動画が正しく表示されることを確認します。

カスタム動画プレーヤーの使用

動画プレーヤーの外観をより詳細に制御したいチームのために、Video.jsやPlyrのようなカスタムプレーヤーは、追加のカスタマイズオプションを提供します。

Video.jsは、無料で使用でき、すべてのブラウザで動作するオープンソースのHTML5動画プレーヤーです。Zendeskコミュニティには、CSSとJavaScript参照をdocument_head.hbsテンプレートファイルに追加して、ヘルプセンターにVideo.jsを実装するためのチュートリアルがあります。

Plyrは、一部のZendeskテーマ（Zenplatesなど）にデフォルトで含まれている別のカスタマイズ可能なオプションです。Plyrを使用すると、動画プレーヤーのスタイルをブランドの色に合わせたり、プレーヤーのどの要素を表示するかを制御したりできます。

どちらのオプションもテーマコードの編集が必要なため、開発リソースがあるチーム、またはこれらのプレーヤーがすぐに使用できるテーマを使用しているチームに最適です。

Zendesk Guideの記事の動画埋め込みに関する一般的な問題のトラブルシューティング

明確な指示があっても、物事が常にスムーズに進むとは限りません。最も一般的な問題の処理方法を次に示します。

動画がまったく表示されない カスタムHTML埋め込みを使用している場合、最も可能性の高い原因は、[安全でないコンテンツを表示する]設定です。Guide設定で有効になっていることを再確認してください。すでにオンになっている場合は、ブラウザのキャッシュをクリアするか、シークレットウィンドウで確認してください。

「埋め込みできません」エラー これは通常、URL形式が認識されないことを意味します。ネイティブ埋め込みの場合は、埋め込みURLまたは短縮リンクではなく、標準の共有URLを使用していることを確認してください。特にVidyardの場合、URLは埋め込み形式ではなく、https://share.vidyard.com/watch/[UUID]形式である必要があります。

動画がモバイルで正しく表示されない 標準のiframe埋め込みには、多くの場合、小さい画面で壊れる固定寸法があります。可能な場合はレスポンシブ埋め込みコードを使用するか、アスペクト比を維持するCSSを使用してiframeをコンテナで囲みます。16：9の比率は、ほとんどの動画コンテンツの標準です。

動画がWeb Widgetで再生されない ZendeskのWeb Widget（クラシック）を使用してWebサイトにヘルプコンテンツを表示している場合、動画は公開されており、ネイティブにサポートされているプラットフォームのいずれかでホストされている必要があります。カスタムHTML埋め込みは、完全なヘルプセンターで動作する場合でも、ウィジェットで動作しない場合があります。

ナレッジベースでの動画のベストプラクティス

動画の埋め込みは簡単ですが、うまく行うにはある程度の検討が必要です。

動画を簡潔にする ヘルプセンターの動画は、すぐに要点をつかむ必要があります。3分以内を目指してください。トピックにそれ以上の時間が必要な場合は、1つの長いチュートリアルではなく、一連の短い動画に分割することを検討してください。

キャプションとトランスクリプトを追加する アクセシビリティは重要です。キャプションは、聴覚障害のある視聴者や難聴の視聴者に役立ち、音声なしで視聴する人にも役立ちます。トランスクリプトは、読書を好む人や、特定の情報をすばやくスキャンする必要がある人のための代替手段を提供します。

ページのパフォーマンスを考慮する 動画は、特に1つのページに複数の埋め込みがある場合、ページの読み込み時間を遅くする可能性があります。可能な場合は遅延読み込みを使用して、ユーザーがスクロールしたときにのみ動画が読み込まれるようにします。また、自動再生設定にも注意してください。音声付きの動画を自動再生すると、ユーザーエクスペリエンスが低下します。

モバイルでテストする ユーザーのかなりの部分が携帯電話でヘルプセンターを表示します。公開する前に、埋め込まれた動画がモバイルデバイスでどのように表示および動作するかを常にテストしてください。

最新の代替手段：Zendesk向けのeesel AI

Zendesk Knowledgeは、基本的なユースケースでは動画の埋め込みをうまく処理します。ただし、一部のチームは、マルチメディアコンテンツを顧客に管理および配信する方法において、より柔軟性が必要です。

eesel AIでは、ナレッジマネジメントに異なるアプローチをとっています。動画を静的な埋め込みとして扱うのではなく、当社のAIは、ヘルプセンターの記事、ドキュメント、過去のサポート会話とともに、動画コンテンツから学習します。顧客が質問をすると、AIは動画全体を視聴しなくても、動画からの情報を参照できます。

安全でないコンテンツ設定を有効にしたり、iframe埋め込みを心配したりする必要はありません。当社は、統合プラットフォームの一部としてメディアを安全に処理および提供します。すでにZendeskをチケット発行に使用している場合は、当社のZendesk AI統合が既存のセットアップと連携して、動画コンテンツを含む完全なナレッジベースから引き出すAI搭載の応答を追加します。

サポート量を削減しながら顧客体験を向上させたいと考えているチームにとって、このアプローチは従来の動画埋め込みを完全に補完または置き換えることができます。eesel AIがZendeskと連携してサポートワークフローを強化する方法について詳しく学んでください。ZendeskでAI搭載のサポートを始めたいチームは、ZendeskのためのeeselのAI統合をご確認ください。