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などからお気軽にどうぞ。
出来る限りなるべく答えます。

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

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

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

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

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

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

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

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

: Redmine 3.0.0 のメールサーバーでGoogleApps SMTPサーバーを利用する

Redmineのメール通知サーバーとしてGoogleAppsを使用する方法です。 …

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

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

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

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