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入門ガイド」という本を書きました。

【PR】「ポケットスタディ AWS認定デベロッパーアソシエイト」という本を書きました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

: Google Apps ScriptでAdmin SDK Directory Serviceを使ってユーザの最終ログイン情報一覧を出力する

GoogleAppsで使わなくなったアカウントを確認する方法として、最終ログイン …

: Google関連のAPIを試すためのGoogleSiteを作ってみました

組み込み機能で出来る事は組み込み機能でと思いまして、Googleサイトを試験的 …