動画埋め込みが崩れる

埋め込みタグで埋め込んだ動画でレイアウト崩れが発生する場合、CSSが競合している可能性があります。

クラス名を別の名前に変更する

埋め込みタグに使用したクラス名がすでに同サイト内で使われている可能性があり、そのCSSの影響を受けて動画のレイアウトが崩れてしまう、もしくはサイト自体のレイアウトを崩してしまう可能性があります。
wrapperではなくmovie-wrapperなど、別の固有の名前へと書き換えることで、崩れを解消することができます。

書き換えの例

こちらはクラス名をrichka-wrapper、richka-wrapに書き換えた場合の例となります。

html

<div class="richka-wrapper">
         <div class="richka-wrap">
             <iframe src="動画URL"></iframe>
         </div>
 </div>

CSS

.richka-wrapper {
    max-width: 動画の最大幅px;
    padding: 10px;
    margin: 10px auto;
}

.richka-wrap {
     position: relative;
     width: 100%;
     padding: calc(動画の最大高さ / 動画の最大幅*100%) 0 0;
 }

 .richka-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

クラス名を変更してもレイアウトが崩れてしまう場合は、RICHKA画面右下のチャットサポートへご相談ください。