ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

前へから 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

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

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

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

メモ:



コメントを残す

コメント