お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    WordPressのスキルアップ!▶

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

    WordPress(ワードプレス)
    この記事は約2分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    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動画などの埋め込みを中央揃えにすることができます!

    ご参考ください😃

    タイトルとURLをコピーしました