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;

}

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

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

【PR】「AWS認定試験対策 AWS クラウドプラクティショナー」という本を書きました。

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

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

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

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

: GoogleAppsScriptを使ってGmailをSpreadSheetにエクスポートする

GoogleAppsScriptを使ってGmailをSpreadSheetにエク …

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

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

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

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

: Google Apps ScriptでAdmin SDK Directory Serviceを使ってグループメンバー情報を出力する

GoogleAppsのGoogleGroupをメーリングリストとして使っている人 …

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

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

: chromium OS をインストールするためのUSBをMacで作る

別にChromeBookを購入するお金をけちるわけではないのですが。 chrom …