CSS [CSS]Google MapsやYoutubeなど埋め込みiframeのレスポンシブ対応
CSS HTML デモ .iframe_container {width: 100%;margin: auto;padding: 0} .iframe_container iframe {width: 100%;height: 500px;...
Youtube
CSS 
Google Youtubeの埋め込み動画で関連動画を表示しないようにする方法
企業のWEBサイト上に、その企業が公開しているYoutube動画を埋め込み共有しようとすることも多いと思いますが、動画再生後の関連動画がその企業とは関係ないものだったりすることも多いため、関連動画を表示させないようにする機会もあるのではない...
HTML [HTML]YouTubeの埋め込みの際に動画タイトルを表示させない方法
Youtubeの動画をブログに埋め込み表示する際に、タイトルバーを非表示にする方法のご紹介です。 Youtubeの埋め込み動画のタイトルを非表示にする Youtubeのサイトから動画の埋め込みを選択し、ソースコードをコピーしたら、 URLの...
Google Youtubeの埋め込み動画の各種操作パネルを非表示にする方法
Youtubeの動画をブログやサイトに埋め込む際に、各種操作パネルを非表示にする方法のご紹介です。 Youtubeの埋め込み動画ので操作パネルを非表示にする Youtubeで動画の埋め込みを選択すると、以下のようなコードが生成されると思いま...
CSSスニペット [CSS]iframe要素をレスポンシブ対応させる方法
以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidityを使わずにちょっとしたCSSのスタイル記述だけで簡単にiframe要素をレシポンシブ対応さ...
Javascript・jQuery [JS]画像や動画、iframeもLightbox風に立ち上げるjQueryプラグインColorboxの使い方
画像をオーバーレイで拡大表示できるスクリプトとして、Lightbox はよく使いますが、動画やinline コンテンツ、iframeなどもLightbox 風に表示させるにはjQueryプラグインColorboxが便利です。 カスタマイズし...
Google Youtubeの動画で様々なサイズのサムネイル画像を取得する方法
ブログやサイトにYoutube動画を貼付ける場合は、Youtubeのページで発行されるタグを貼付けるだけで簡単に設置できます。 ただ、動画のサムネイルを掲載する場合は、Youtubeの右っちょに表示されているサムネイルを利用したくても、画像...
Google [IE6]Youtubeの埋め込み動画をIE6に対応させる方法
Yotube動画を自分のサイトやブログに貼付ける場合、iframe版のスッキリしたタグを使いたい所ですが、 これだとIE6で動画が見えない… ので、企業サイトを中心にYoutube動画をIE6でも見れるように対応する必要がある場合は「以前の...