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%;
}

関連記事紹介

APICE　INTELIGENCE

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

APICE　INTELIGENCE

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

APICE　INTELIGENCE

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

tecn

カレンダーがスマホで横スクロール表示になってくれない | tecn TECN NEWS 自動表示枠 横長の要素にoverflowが効かない問題 コーダーのオッコです。 カレンダーをスマホで横スクロールにしたかったのですが、カレンダーの横幅のcssを以下...