MENU

Canvaの動画埋め込み方法と動かない、できない場合の対処法教えます

Canvaの動画埋め込み方法と動かない、できない場合の対処法教えます
クリエイター講師:佐々木

クリエイター講座へようこそ!講師の佐々木です。
ウェブサイトやプレゼンテーション資料に動きと視覚的な魅力を加えたいと思ったことはありませんか?
Canvaなら、デザインの中に簡単に動画を埋め込んだり、Canvaで作成した動画をウェブサイトに埋め込んだりすることができます。
そこで本講座では、Canvaで動画を扱うためのあらゆる方法を、初心者の方にも分かりやすく解説します。デザイン内への動画埋め込みから、ウェブサイトへの埋め込み、そして「動かない」「できない」といったトラブルシューティングまで、あなたの疑問を解決します。

講座 目次

Canvaでデザイン内に動画を埋め込む方法

Canvaでは、主に以下の2つの方法でデザイン内に動画を埋め込むことができます。

1. Canvaの素材ライブラリから動画を挿入する

Canvaは、豊富な動画素材ライブラリを提供しています。これを利用すれば、アップロードの手間なく、デザインに直接動画を追加できます。

Canvaの素材ライブラリから動画を挿入する

具体的な手順

  1. Canvaのデザインエディタを開き、動画を埋め込みたいデザインを選択します。
  2. 左側のメニューから「素材」をクリックします。
  3. 検索バーにキーワードを入力するか、「動画」カテゴリを選択して、目的の動画を探します。
  4. プレビューを確認し、使用したい動画をデザイン上にドラッグ&ドロップします。
  5. 配置やサイズを調整します。

2. 外部から動画をアップロードして挿入する

自分で作成した動画や、Canvaのライブラリにない動画を使用したい場合は、アップロード機能を利用します。

1. デザインテンプレートの「動画」→「Youtube動画」を選択

具体的な手順

  1. Canvaのデザインエディタを開き、動画を埋め込みたいデザインを選択します。
  2. 左側のメニューから「アップロード」をクリックします。
  3. 「ファイルをアップロード」ボタンをクリックし、ローカルコンピュータ内の動画ファイルを選択します。
  4. アップロードが完了したら、「動画」タブに表示された動画をデザイン上にドラッグ&ドロップします。
  5. 配置やサイズ、再生時間などを調整します。

デザイン内での動画編集

Canvaに埋め込んだ動画は、簡単な編集が可能です。

  • トリミング: 動画の再生時間を調整できます。動画を選択した状態で表示される「編集」ボタンをクリックし、トリミングバーをドラッグします。
  • 音量調整: 動画の音量を調整できます。動画を選択した状態で表示されるスピーカーアイコンをクリックし、スライダーで調整します。
  • 再生設定: 動画の再生方法を設定できます。動画を選択した状態で表示されるメニューから、「ループ再生」や「自動再生」などを選択できます。

Canvaで作成した動画をウェブサイトで埋め込む方法

Canvaで作成した動画をウェブサイトに埋め込む方法は、主に以下の2つがあります。

1. 埋め込みコードを使用する方法 (推奨)

Canvaは、作成した動画をウェブサイトに埋め込むための埋め込みコードを生成してくれます。この方法が最も柔軟性が高く、推奨されます。

埋め込みコードを使用する方法 (推奨)

具体的な手順

  1. Canvaのデザインエディタで、ウェブサイトに埋め込みたい動画のデザインを開きます。
  2. 右上の「共有」ボタン→開いた画面右下の「すべてを表示」をクリックします。
  3. 表示されたメニューから「埋め込む」を選択します。
  4. 「埋め込みコード」が表示されるので、これをコピーします。
  5. ワードプレス等ウェブサイトのHTML編集画面を開き、動画を埋め込みたい場所にコピーしたコードを貼り付けます。

埋め込みコードの種類

Canvaが生成する埋め込みコードには、主に以下の2種類があります。

  • HTML: iframeタグを使用した基本的な埋め込みコードです。ほとんどのウェブサイトプラットフォームで利用できます。
  • スマート埋め込み: より高度な機能を備えた埋め込みコードです。Canvaのデザインへの変更が自動的にウェブサイトに反映されるなどのメリットがあります。ただし、一部のプラットフォームでは対応していない場合があります。

2. 動画ファイルをダウンロードしてアップロードする方法

Canvaで作成した動画をMP4などの形式でダウンロードし、ウェブサイトのサーバーにアップロードして埋め込む方法です。

動画ファイルをダウンロードしてアップロードする方法

手順

  1. Canvaのデザインエディタで、ウェブサイトに埋め込みたい動画のデザインを開きます。
  2. 右上の「共有」ボタンをクリックします。
  3. 「ダウンロード」を選択します。
  4. ファイル形式で「MP4動画」を選択し、「ダウンロード」をクリックします。
  5. ダウンロードした動画ファイルを、ウェブサイトのサーバーにアップロードします。 
  6. ウェブサイトのHTML編集画面で、<video>タグを使用して動画を埋め込みます。
  • 属性には、アップロードした動画ファイルのパスを指定します。
  • controls属性を追加すると、再生/一時停止ボタンや音量調整などのコントロールが表示されます。
  • widthheight属性で、動画のサイズを指定できます。

動画が動かない、埋め込みできない場合の対処法

Canvaで動画が正常に動作しない場合、いくつかの原因が考えられます。以下の対処法を試してみてください。

Canvaのデザイン内でのトラブル

  • インターネット接続の確認: Canvaはオンラインプラットフォームです。安定したインターネット接続があるか確認してください。
  • ブラウザのキャッシュとCookieのクリア: ブラウザに一時的に保存されたデータが原因で、正常に動作しないことがあります。ブラウザの設定からキャッシュとCookieをクリアし、Canvaを再読み込みしてください。
  • ブラウザのアップデート: 古いバージョンのブラウザを使用している場合、Canvaの機能が正常に動作しないことがあります。最新バージョンにアップデートしてください。
  • Canvaのアプリの再起動: Canvaのアプリ版を使用している場合は、一度アプリを完全に終了し、再起動してみてください。
  • 別のブラウザでの確認: 別のブラウザでCanvaを開き、同様の症状が発生するか確認してください。特定ブラウザの問題である可能性があります。
  • 動画ファイルの形式とサイズ: アップロードした動画ファイルの形式がCanvaでサポートされているか(MP4、MOVなど)、サイズが大きすぎないか確認してください。
  • Canvaのステータス確認: Canvaのサーバーに障害が発生している可能性があります。Canvaの公式ウェブサイトやSNSでステータス情報を確認してください。

ウェブサイトへの埋め込み後のトラブル

  • 埋め込みコードの確認: 埋め込みコードが正しくコピー&ペーストされているか、HTMLの構造に誤りがないか確認してください。
  • ウェブサイトのプラットフォームの制限: 一部のウェブサイトプラットフォームでは、iframeタグの使用が制限されている場合があります。プラットフォームのドキュメントを確認するか、別の埋め込み方法を試してください。
  • 動画ファイルのパスの確認 (<video>タグ使用時): <video>タグのsrc属性に指定した動画ファイルのパスが正しいか確認してください。ファイルがサーバー上の正しい場所にアップロードされているかどうかも重要です。
  • ブラウザの互換性: 一部の古いブラウザでは、HTML5の<video>タグが完全にサポートされていない場合があります。
  • ウェブサイトの表示速度: サイズの大きな動画を埋め込むと、ウェブサイトの表示速度が遅くなることがあります。動画を最適化(圧縮など)するか、読み込み方法を工夫してください。
  • JavaScriptのエラー: ウェブサイト上でJavaScriptのエラーが発生している場合、動画の再生に影響を与える可能性があります。ブラウザの開発者ツールでエラーを確認してください。

Canva埋め込みに関するよくある質問(FAQ)

Canvaの無料プランでも動画を埋め込めますか?

はい、Canvaの無料プランでも、Canvaの素材ライブラリにある無料の動画を埋め込んだり、ご自身の動画をアップロードして埋め込んだりすることができます。

埋め込んだ動画の再生時間を調整できますか?

はい、Canvaのデザインエディタ内で、埋め込んだ動画の再生開始時間と終了時間をトリミング機能で調整できます。

ウェブサイトに埋め込んだ動画を自動再生できますか?

埋め込みコードの種類やウェブサイトのプラットフォームによっては、自動再生の設定が可能です。ただし、ユーザーエクスペリエンスの観点から、自動再生は慎重に検討することをおすすめします。

Canvaで作成した動画のファイル形式は何ですか?

Canvaで動画をダウンロードする場合、通常はMP4形式で保存されます。

埋め込みコードがうまく動作しません。

まず、埋め込みコードを正しくコピー&ペーストしているか確認してください。また、ウェブサイトのプラットフォームが埋め込みを許可しているか、HTMLの構造に問題がないかなどを確認してください。

デザインに埋め込んだ動画をダウンロードできますか?

いいえ、Canvaのデザイン内に埋め込んだ動画を個別にダウンロードすることはできません。デザイン全体を動画形式(MP4)でダウンロードすることになります。

GIFアニメーションを埋め込むことはできますか?

はい、CanvaではGIFアニメーションを画像としてアップロードして埋め込むことができます。素材ライブラリにもGIFアニメーションが用意されています。

本日の講座 まとめ

今回の講座では、Canvaでデザイン内に動画を埋め込む方法と、Canvaで作成した動画をウェブサイトに埋め込む方法について詳しく解説しました。

  • Canvaの素材ライブラリやアップロード機能を利用して、デザインに簡単に動画を追加できます。
  • 埋め込みコードを利用すれば、Canvaで作成した動画をウェブサイトに柔軟に埋め込むことができます。
  • 動画が正常に動作しない場合は、インターネット接続、ブラウザの設定、埋め込みコードの確認など、いくつかのポイントを見直すことで解決できる可能性があります。

動画を効果的に活用することで、あなたのウェブサイトやプレゼンテーションはさらに魅力的になり、情報伝達力も向上するでしょう。Canvaを使いこなして、動画の力を最大限に引き出してくださいね!

韓国発の新世代デザインツール【MiriCanvas】を試してみませんか?

MiriCanvas(ミリキャンバス)」はCanva同様にさまざまなデザインを簡単に作成可能で、さらに韓国っぽいZ世代向けのテンプレートが多数用意されているため、SNS運用や若年層向けのビジネスデザインに超おすすめ!

クリエイター側で稼ぎたい人も、今のうち登録して先行者利益を確保しましょう!

世界No.1のAI写真編集アプリ「Photoroom

「Photoroom(フォトルーム)」は初心者でも直感的に操作できる写真編集アプリです。
AIによる背景除去、背景作成、レタッチ機能など、手軽に使える便利機能が多数用意されています。特にSNSをしている人、EC運営者は必須アイテムですよ!

  • URLをコピーしました!
講座 目次