ウェブサイトを構築する際、動画コンテンツはユーザー体験を大きく向上させることができる。エレメンタそんなビジュアル・エディター。しかし異なるデバイスでビデオを表示する場合属アスペクト比設定重要なことだ。それがYouTube動画の埋め込みローカルビデオをアップロードするにしても、あらゆるタイプのスクリーンでビデオが適切なプロポーションで表示されるようにすることは、デザインの質を高める重要な要素のひとつです。

このチュートリアルでは、Elementor 動画のアスペクト比を簡単に変更し、すべてのデバイスで完璧に表示される動画を実現する方法を説明します。

ステップ1：動画ウィジェットを追加する

まず、Elementorエディタを開き、動画ウィジェットを見つけます。以下の方法で動画を追加できます：

1. 左のツールバーで「ビデオ」を検索。

2. 動画ウィジェットをページ上の動画を配置したい場所にドラッグします。

ステップ2：ビデオソースの設定

ElementorはYouTube、Vimeo、ローカルアップロードなど複数の動画ソースをサポートしています。ニーズに応じて動画ソースを選択し、対応する入力ボックスに動画リンクを貼り付けるか、ファイルをアップロードします。

ステップ3：ビデオのアスペクト比を変更する

Elementorのビデオアスペクト比デフォルト設定は16:9これが現在のウェブ動画の標準的なアスペクト比です。ただし、デザインのニーズに応じてアスペクト比をカスタマイズすることもできます。以下の手順に従って調整してください：

1. 追加したビデオウィジェットを確認してください。
2. の左側にある。タイプ「タブの下にある"アスペクト比「セッティング

3. デフォルト値は16:9ですが、4:3、1:1などのカスタムアスペクト比を入力できます。

3. を入力する。非標準アスペクト比プレビューが良好であることを確認し、さまざまなデバイスでビデオプレゼンテーションをテストする。

ステップ4：CSSによるさらなる最適化

内蔵のアスペクト比設定では、複雑なレイアウトのニーズに対応できない場合があります。そのような場合は、カスタムCSSの助けを借りて、ビデオの比率とスタイルをさらに調整することができます。

1. ビデオ・ウィジェットの"ハイレベルタブ
2. スライドして "カスタムCSS地域
3. カスタムCSS入力ボックスに以下のコードを入力して、ビデオのアスペクト比を調整します：

セレクタ iframe {
    アスペクト比: 16 / 9; /* 4 / 3など、お好みのアスペクト比に調整してください。
    width: 100%; height: auto; /* 4 / 3など、お好みのアスペクト比に調整してください。
    width: 100%; height: auto；
}

このコードにより、ビデオは設定されたアスペクト比に自動的に調整され、デバイス間で同じ比率が維持されます。

ステップ5：レスポンシブ最適化

動画のアスペクト比を設定したら、異なるデバイスで動画がどのように見えるかをテストすることを忘れないでください。Elementorはレスポンシブデザインツールを提供しており、異なるスクリーンでページがどのように見えるかを簡単にプレビューできます：

1. Elementorの一番下のツールバーで"応答モード".

2. デスクトップ、タブレット、モバイルの各モードを選択し、各デバイスでビデオが正しく表示されるようにします。
3. 必要に応じてアスペクト比や余白を微調整し、小さな画面のデバイスでも良好な視聴体験を維持できるようにします。

評決を下す

Elementorの動画アスペクト比設定機能を使えば、動画の表示を簡単に調整したり、カスタムCSSでより高度なデザインニーズを実現したりすることができます。ユーザーに一貫した視聴体験を保証するために、異なるデバイスでテストすることを忘れないでください。