コンテンツへスキップ
Clevera ヘルプセンター

動画や記事をサイトに埋め込む

Cleveraの動画や記事を、Webサイト、WordPress、Webflow、Framer、Notion、Confluenceに埋め込む方法を解説します。HTMLコードやリンクのオプション、埋め込み設定とデフォルト値、サイズ調整、ブランディング、埋め込みが機能しなくなる原因について説明します。

更新日: 読了時間 2 分

Cleveraの動画や記事を、ウェブサイト、ヘルプセンター、Notionページ、Confluenceスペースに配置できます。埋め込みプレイヤーには常に最新バージョンが表示され、そこからの視聴も分析にカウントされます。

始める前に

  • 埋め込みには動画の共有リンクを使用します。リンクが無効な場合、埋め込みタブには「埋め込みには共有リンクを使用します」と表示され、リンクを有効にするボタンが表示されます。リンクで動画を共有するを参照してください。
  • 動画や記事を編集する権限が必要です。
  • 埋め込むには、サイトやツールがHTMLスニペットまたは埋め込みリンクに対応している必要があります。

動画や記事を埋め込む

  1. 埋め込みタブを開く

    エディターで共有をクリックし、埋め込みを選択します。左側にライブプレビュー、右側にオプションが表示されます。

    ライブプレビュー、「タイトルと詳細」および「チャプター」のスイッチ、埋め込みコードが表示された埋め込みタブ。
  2. オプションを設定する

    タイトルと詳細やチャプターのオン/オフを切り替えたり、記事のテーマや高さを選択したりします。設定を変更するとプレビューが更新されます。埋め込みオプションを参照してください。

  3. 埋め込み方法を選択する

    埋め込み方法で以下を選択します:

    • HTMLコード — 「任意のページ、またはWordPress、Webflow、FramerのカスタムHTMLブロックや埋め込みブロックに貼り付けます。」
    • リンク — 「Notion、Confluence、またはリンクを埋め込みに変換するツールに貼り付けます。」
  4. コピーして貼り付ける

    コードをコピーまたはリンクをコピーをクリックします。ボタンがコピーしましたに変わります。プレイヤーを表示したい場所に貼り付けてください。貼り付け場所を参照してください。

埋め込みオプション

表示されるオプションは、埋め込む対象によって異なります。

オプション 機能 デフォルト 表示対象
タイトルと詳細 「再生開始前にプレイヤー上に」タイトルと詳細を表示します。 オン 動画
チャプター 「タイムライン上に」チャプタータイトルを表示します。 オン チャプター付きのハウツー動画やデモ動画
記事テーマ ライトまたはダークの記事ページ ライト 記事
フレームの高さ フレームの高さ(ピクセル単位、300〜2,000) 800 px 記事
スケーリングされたプレビュー、記事テーマ、フレームの高さ、埋め込みコードが表示された記事用の埋め込みタブ。

ソーシャルクリップ、ティーザー、洗練された録画にはチャプターがないため、それらにはチャプタースイッチは表示されません。

一部の古い動画には、動画と記事が1つにまとめられているものがあります。その場合、埋め込みタブに表示が追加され、動画、動画と記事、記事から選択できます。記事を含める場合は、記事のオプションも適用されます。

埋め込みのサイズ調整

埋め込み対象 ページ上の表示
動画 プレイヤーはコンテナの幅いっぱいに広がり、どのサイズでも16:9の比率を維持します。「ライブプレビュー。ページ上では、プレイヤーは16:9でコンテナに収まります。」縦長や正方形の動画は、黒帯の代わりに自身の画像のぼかした背景の上に配置されます。
記事 コンテナと同じ幅で、フレームの高さと同じ高さのフレームになります。コード内の小さなスクリプトがフレームを記事全体に合わせて拡張するため、ページの一部のように読み込めます。記事内のClevera動画は、元の比率を維持します。

サイトが貼り付けたコードからスクリプトを削除する場合、記事フレームは固定された高さのままとなり、その中で記事がスクロールされます。窮屈に感じる場合はフレームの高さを上げてください。

埋め込んだ記事内に動画を配置するには、Clevera動画ブロックとして記事に追加してください。記事に動画を表示するを参照してください。

貼り付け場所

NotionおよびConfluence用のリンク埋め込みオプションと、リンクをコピーボタン。
場所 貼り付けるもの 方法
任意のウェブサイト HTMLコード プレイヤーを表示したいページのHTMLに貼り付けます。
WordPress HTMLコード カスタムHTMLブロックを追加してコードを貼り付けます。
Webflow HTMLコード 埋め込み要素を追加してコードを貼り付けます。
Framer HTMLコード 埋め込みコンポーネントを追加してコードを貼り付けます。
Notion リンク /embedと入力し、埋め込みを選択してリンクを貼り付け、リンクを埋め込むをクリックします。
Confluence リンク リンクを独立した行に貼り付け、埋め込みビューを選択するか、サイトで利用可能な場合はiframeマクロを使用します。
その他のツール リンクまたはHTMLコード 「埋め込み」、「iframe」、または「カスタムHTML」ブロックを探してください。

埋め込みを維持する

  • 編集内容は自動的に反映されます。 埋め込みは現在のバージョンを再生します。編集後に新しいコードを貼り直す必要はありません。
  • リンクを無効にすると、すべての埋め込みが停止します。 「この動画は利用できません」および「所有者がこの動画の共有を停止しました」と表示されます。リンクを再度有効にすると、同じ埋め込みが再び機能します。
  • リンクをリセットすると、すべての埋め込みが完全に停止します。 古いコードには「この動画は利用できません」と表示されます。埋め込みタブから新しいコードをコピーして貼り直してください。これまでの視聴数は保持されます。リンクをリセットするを参照してください。
  • 動画を削除すると、その埋め込みは停止します。 「この動画は削除されました」と表示されます。
  • ブランディング。 動画プレイヤーには、どのプランでもCleveraのバッジは表示されません。Freeプランでは動画自体に「Made with Clevera」の透かしが入りますが、有料プランではこれが削除され、独自のロゴをプレイヤーに追加できます。埋め込まれた記事の末尾には、どのプランでも小さな「Made with Clevera」リンクが表示されます。Cleveraの透かしを削除するを参照してください。
  • 視聴数がカウントされます。 埋め込みでの再生は、共有ページと同様に視聴数としてカウントされます。埋め込みタブのライブプレビューはカウントされません。動画分析を読むを参照してください。

トラブルシューティング

問題 対処法
埋め込みタブにリンクを有効にするしか表示されない 共有リンクが無効です。有効にしてからコードをコピーしてください。
「コピーできませんでした。テキストを選択して手動でコピーしてください。」 ブラウザがクリップボードをブロックしています。ボックス内のコードを選択し、⌘ CまたはCtrl Cでコピーしてください。
埋め込みに「この動画は利用できません」と表示される リンクが無効かリセットされたか、動画が削除されたか、コードの一部が欠落しています。リンクタブを確認し、コードを再度コピーしてください。
ページにコードがテキストとして表示される 通常のテキストブロックに貼り付けています。サイトのHTML、カスタムHTML、または埋め込みブロックを使用してください。
NotionやConfluenceにリンクがそのまま表示される HTMLコードではなくリンクを使用し、貼り付け時に埋め込みオプションを選択してください。
記事が途切れる サイトがリサイズスクリプトを削除しています。フレームの高さを上げてください。