埋め込みタグのレスポンシブ対応

1. 動画を挿入したい箇所に埋め込みタグを貼り付けます。

2. 貼り付けた<iframe>タグを下記の2つの<div>タグで囲います。

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

3. 下記のcssを追加してください。

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

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

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

※ CSSは埋め込みタグの上に追加しても、外部cssでも構いません。
　埋め込みタグ上に追加する場合は<style></style>で囲ってください。
※ 上記の書き換え部分は、埋め込みタグに記載されている最大幅（width）、最大高さ（height）に合わせる必要があります。
埋め込みタグ側の数値を変更していただいてもOKです。

4. HTMLを保存して、アップロードすれば、レスポンシブ対応の完了です。

埋め込み例

1:1比率の動画の場合

<style>
.movie-wrapper {
    max-width: 640px;
    padding: 10px;
    margin: 10px auto;
}
 .movie-wrap {
    position: relative;
    width: 100%;
    padding: calc(640 / 640*100%) 0 0;
}
 .movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="movie-wrapper">
     <div class="movie-wrap">
<iframe src="https://player.richka.co/embed/fc7a734dba518f032608dfeb04f4eeb79f025aa7/f92ae1467fd1684184175fcbe2818e0b58829f92/?w=640&h=640&a=0&m=1&q=l" width="640" height="640" frameborder="0" ></iframe>
　　  </div>
</div>