トップページのレスポンシブ対応

Question

■実現したいこと

トップページに組み込んだYouTubeの動画をレスポンシブ対応に変更したい

■現在使用しているコード

<iframe id="movie_data" style="width: １９０１px; height: ５０４px;" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/9j-SFP5xCok?loop=1&amp;playlist=9j-SFP5xCok&amp;controls=0&amp;autoplay=1&amp;showinfo=0&amp;enablejsapi=1&amp;disablekb=0&amp;fs=0&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;rel=0&amp;origin=https%3A%2F%2Fstandard-inc.net&amp;widgetid=1">

■試してみたこと

色々なサイトを参考にしたところ以下のコードを埋め込んだらいいとのことなのですが上記のコードに埋め込んでも反映されません。

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

</iframe>

■わからない点

コードを埋め込む場所は「現在使用しているコード」のところであっているのか

レスポンシブ対応のコードはあっているのか

プログラミングを始めたばかりで初歩的なことを聞いてしまっているかもしれません。
どうぞよろしくお願い致します。

Answer 1

<div class="youtube">
  <iframe></iframe> //※Youtube埋め込みコードをここに入れる
</div>

参考したCSSコードは、上記HTML構造になっているのが前提です。
埋め込み用のiframe要素だけでは適用されません。
.youtubeは「class="youtube"」が設定された要素、
.youtube iframeは「class="youtube"」の中のiframe要素
をそれぞれ対象としたセレクタなので。

とりあえずCSSのセレクタの基本を勉強されると良いと思います。