763万 キーワード

2021年 検索パフォーマンス

57.8万 ユーザー

2021年 訪問ユーザー数

WordPressのスキルアップはこちら!▶[click]

【WordPress】cocoonの記事内にYoutube動画を埋め込んだ際に中央配置できない場合に中央寄せにする方法|video-container

WordPress(ワードプレス)
この記事は約2分で読めます。
スキルアップで未来を変える!!
情熱があれば【誰でも】挑戦できます!
ここからSTART↓

Youtube動画が中央寄せにならない?

cocoonの記事本文内でYoutube動画を設定したとき。

編集画面では「中央揃え」を選択していますが・・・

やはり中央揃えに、なりません・・・。

通常のCSS

.video-container {
    max-width: 640px;
    margin: 30px 0;
}

中央揃えを指定した場合のCSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    margin-top: 30px;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

幅広

.video-container {
    max-width: 640px;
    margin: 30px 0;
}

変化なし・・・?

全幅

.video-container {
    max-width: 640px;
    margin: 30px 0;
}

変化なし?

CSSで調整する

.video-container {
    max-width: 640px;
    margin: 30px 0;
}

動画が「常に中央揃え」でも大丈夫であれば、CSSで設定してしまう方法が簡単です。

margin: auto;

margin:auto;
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。

https://developer.mozilla.org/ja/docs/Web/CSS/margin
.video-container {
margin: auto;
}
サンプルページ

video-containerがクラス名なので、marginをautoにすることで中央揃えになります。

中央揃えになりました!

まとめ

cocoon設定には見当たりませんでしたが、CSSで変更をすることでYoutube動画などの埋め込みを中央揃えにすることができます!

ご参考ください😃

Loading
「ワードプレスで未来を変える!」
【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して人生を変えたい!!という方をお待ちしています↓↓
WordPress(ワードプレス)
EGUWEB
タイトルとURLをコピーしました