youtube-container クラスのheightを調整

2020/04/16 2020/04/20

当ブログにGoogleカレンダーとかGoogleフォームを埋め込むと、heightがゼロになりまして。
フォームとがスクロールバー必須になって、入力しにくいフォームになりました。

見てみると、styles.cssのyoutube-containerってとこで設定されているようでした。

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    overflow: hidden;
    height: 0;
}

.youtube-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

overflow: hidden;

height: 0;

}

特定の要素(id=”calform”)だけheightを指定したかったので、styles.cssに以下を追加しました。

#calform .youtube-container{
    height : 950px !important;
}

#calform .youtube-container{

height : 950px !important;

}

ちょうどよくなりました。

最後までお読みいただきましてありがとうございました！

「AWS認定資格試験テキスト＆問題集　AWS認定ソリューションアーキテクト - プロフェッショナル改訂第2版」という本を書きました。

「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー改訂第3版」という本を書きました。

「ポケットスタディ AWS認定デベロッパーアソシエイト［DVA-C02対応］」という本を書きました。

「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

「AWSではじめるLinux入門ガイド」という本を書きました。

開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。

: Googleカレンダーの予定をPHPからXMLで取得してWebページに表示する(現在廃止されたAPIなので使えません)

ご注意 ※下記の記事で使用していたAPIは2016年現在使用出来なくなっています …

: 「Cloud Vision Api & Tensorflow勉強会」に行ってきました

「Cloud Vision Api & Tensorflow勉強会」に行 …

: ライブ配信のカレンダーをGoogle Apps Scriptとかで作りました

ライブ配信がまとまっているカレンダー欲しいなあと思いまして。まとめようと思いま …

: 動画間の広告を飛ばすのが面倒になったのでYoutube Premiumに加入しました

テレビのCMは全然見る方なんですが、Youtubeの動画の間の広告ってなんか流し …

: 共有Googleカレンダーを自分のカレンダーに追加してiPhoneに同期する

配信ライブカレンダーという共有カレンダーを作りました。このようなGoogleの …

: Googleカレンダーの予定をV3 APIでPHPからJSONを取得してWebページに表示する

Googleカレンダーを使って管理しているライブスケジュールを日付によって、未 …