【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合

前へから Diviテーマ全体の幅に動画の背景を追加する方法を説明しました。 そしてVideo Sliderにも紹介しました。

動画を追加することで動画の背景に追加したり、 動画(Video)モジュール 또는 動画スライダー(Video Slider) モジュールを使用する方法のほか、一般的な スライダー(Slider) モジュールを使用することも可能です。

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、8

モジュールを使用する場合には、XNUMXつの中から好みを選択すると、なりそうです。

この記事では、スライダー「モジュールを使用してYouTube動画リンクを追加してYouTube動画を表示するときに、YouTube動画がフルサイズで表示されない問題に対処しようとしています。

たとえば、以下のようにスライダーモジュールを配置して:

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、9

YouTubeの動画のリンクを追加してみると考えとは異なり、全体の長さではなく、半分のサイズで表示されることがあります。

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、10

この場合は、次のような方法でRow(行)を満たすようにすることができます。

まず、スライダーモジュールにCSSクラスを追加するようにします。 スライダーモジュールの設定 - >詳細 - > CSS ID&クラスに移動します。

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、11

CSSクラスに必要なクラス名を追加します。 (例えば、custom-slider)

次に Divi>テーマオプション>一般>ユーザーカスタマイズCSS(英語UI: Divi > Theme Options > General > Custom CSS)に移動した後に次のCSSコードを追加します。

.custom-slider .et_pb_slide_video {
width: 100%;
}

この状態で、ページをリフレッシュしてみると幅は、通常出てくるが高(縦の長さ)が半分の大きさで表示されます。

スライダーモジュールの設定>デザインに移動して、ユーザー定義の内部余白で上部を30%、下を30%に設定することです。

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、12

今保存し、次のページを更新してみると以下の図のように正しく表示されます。

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、13

ここで デモを確認することができます。

エレガント ThemesのDiviテーマはいくつかの方法で動画を追加することができます。 状況に応じて適切な方法を選択して動画を追加することができます。

【Diviテーマ]スライダーモジュールでYouTubeのビデオが半分のサイズで表示される場合、14

メモ:

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

コメントを残す

*メールアドレスは公開されません。