YouTubeのiframeのサイズ調整CSS

/* YouTube */
/*親*/
.youtube {
    position: relative;
    padding-bottom: 50%;
    height: 150px;
    overflow: hidden;
    margin-bottom: 20px;
    margin: 0 7px;
    border-radius: 10px;
}
.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

関連記事紹介

あわせて読みたい

position:stickyを使ってテーブルの1行目を固定する【css】 デザイナーのオッコです。 表が長くなると、見出しを固定したくなることがありますね。 今日はそんなときに使える、position:stickyを使った処理をご紹介したいと思いま...

あわせて読みたい

scroll-hintで横長の表の操作性を改善する デザイナーのオッコです。 どうしても横長のコンテンツをスマホで表示しなければならないときってありますよね。 でもぱっと見て「横スクロールができる」とユーザーに...

あわせて読みたい

インデント【無料】HTMLのコード整形ツール コーディングにはインデントを入れるルールがありますが、複数のエンジニアやコーダーが入ってコピー＆ペーストなどで編集した時、かなりインデントが乱れ、コードがわ...

あわせて読みたい

カレンダーがスマホで横スクロール表示になってくれない 横長の要素にoverflowが効かない問題 コーダーのオッコです。 カレンダーをスマホで横スクロールにしたかったのですが、カレンダーの横幅のcssを以下のように書いてもは...