\世界No.1のAI写真編集アプリ/
Canvaの動画埋め込み方法と動かない、できない場合の対処法教えます


クリエイター講座へようこそ!講師の佐々木です。
ウェブサイトやプレゼンテーション資料に動きと視覚的な魅力を加えたいと思ったことはありませんか?
Canvaなら、デザインの中に簡単に動画を埋め込んだり、Canvaで作成した動画をウェブサイトに埋め込んだりすることができます。
そこで本講座では、Canvaで動画を扱うためのあらゆる方法を、初心者の方にも分かりやすく解説します。デザイン内への動画埋め込みから、ウェブサイトへの埋め込み、そして「動かない」「できない」といったトラブルシューティングまで、あなたの疑問を解決します。
Canvaでデザイン内に動画を埋め込む方法
Canvaでは、主に以下の2つの方法でデザイン内に動画を埋め込むことができます。
1. Canvaの素材ライブラリから動画を挿入する
Canvaは、豊富な動画素材ライブラリを提供しています。これを利用すれば、アップロードの手間なく、デザインに直接動画を追加できます。


具体的な手順
- Canvaのデザインエディタを開き、動画を埋め込みたいデザインを選択します。
- 左側のメニューから「素材」をクリックします。
- 検索バーにキーワードを入力するか、「動画」カテゴリを選択して、目的の動画を探します。
- プレビューを確認し、使用したい動画をデザイン上にドラッグ&ドロップします。
- 配置やサイズを調整します。
2. 外部から動画をアップロードして挿入する
自分で作成した動画や、Canvaのライブラリにない動画を使用したい場合は、アップロード機能を利用します。


具体的な手順
- Canvaのデザインエディタを開き、動画を埋め込みたいデザインを選択します。
- 左側のメニューから「アップロード」をクリックします。
- 「ファイルをアップロード」ボタンをクリックし、ローカルコンピュータ内の動画ファイルを選択します。
- アップロードが完了したら、「動画」タブに表示された動画をデザイン上にドラッグ&ドロップします。
- 配置やサイズ、再生時間などを調整します。
デザイン内での動画編集
Canvaに埋め込んだ動画は、簡単な編集が可能です。


- トリミング: 動画の再生時間を調整できます。動画を選択した状態で表示される「編集」ボタンをクリックし、トリミングバーをドラッグします。
- 音量調整: 動画の音量を調整できます。動画を選択した状態で表示されるスピーカーアイコンをクリックし、スライダーで調整します。
- 再生設定: 動画の再生方法を設定できます。動画を選択した状態で表示されるメニューから、「ループ再生」や「自動再生」などを選択できます。
Canvaで作成した動画をウェブサイトで埋め込む方法
Canvaで作成した動画をウェブサイトに埋め込む方法は、主に以下の2つがあります。
1. 埋め込みコードを使用する方法 (推奨)
Canvaは、作成した動画をウェブサイトに埋め込むための埋め込みコードを生成してくれます。この方法が最も柔軟性が高く、推奨されます。


具体的な手順
- Canvaのデザインエディタで、ウェブサイトに埋め込みたい動画のデザインを開きます。
- 右上の「共有」ボタン→開いた画面右下の「すべてを表示」をクリックします。
- 表示されたメニューから「埋め込む」を選択します。
- 「埋め込みコード」が表示されるので、これをコピーします。
- ワードプレス等ウェブサイトのHTML編集画面を開き、動画を埋め込みたい場所にコピーしたコードを貼り付けます。
埋め込みコードの種類
Canvaが生成する埋め込みコードには、主に以下の2種類があります。
- HTML: iframeタグを使用した基本的な埋め込みコードです。ほとんどのウェブサイトプラットフォームで利用できます。
- スマート埋め込み: より高度な機能を備えた埋め込みコードです。Canvaのデザインへの変更が自動的にウェブサイトに反映されるなどのメリットがあります。ただし、一部のプラットフォームでは対応していない場合があります。
2. 動画ファイルをダウンロードしてアップロードする方法
Canvaで作成した動画をMP4などの形式でダウンロードし、ウェブサイトのサーバーにアップロードして埋め込む方法です。


手順
- Canvaのデザインエディタで、ウェブサイトに埋め込みたい動画のデザインを開きます。
- 右上の「共有」ボタンをクリックします。
- 「ダウンロード」を選択します。
- ファイル形式で「MP4動画」を選択し、「ダウンロード」をクリックします。
- ダウンロードした動画ファイルを、ウェブサイトのサーバーにアップロードします。
- ウェブサイトのHTML編集画面で、<video>タグを使用して動画を埋め込みます。
- 属性には、アップロードした動画ファイルのパスを指定します。
controls
属性を追加すると、再生/一時停止ボタンや音量調整などのコントロールが表示されます。width
とheight
属性で、動画のサイズを指定できます。
動画が動かない、埋め込みできない場合の対処法
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を使いこなして、動画の力を最大限に引き出してくださいね!