タグ

cssと動画に関するsima-boxのブックマーク (3)

  • Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法

    Youtube の埋め込みをレスポンシブ対応のページにそのまま入れようとしても、可変になってくれないという問題がでてきます。 レスポンシブ対応する方法について、毎回調べてしまっていたので、メモとしてエントリーしておきます。 Youtubeの埋め込みをレスポンシブ対応するCSS:条件付き2014年8月19日時点での埋め込みコードをレスポンシブ対応するには、以下のようにしておくだけです。 HTML

    Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法
    sima-box
    sima-box 2018/06/28
    Youtube レスポンシブ対応
  • YouTubeやGoogleマップやInstagramの埋込みを簡単にレスポンシブ化してくれるサービス「embedresponsively.com」|BLACKFLAG

    ちょっと前に話題になっていた、YouTubeやGoogleマップやInstagramなどの ページ内に埋め込む際のURLや埋め込みコードを 簡単にレスポンシブ化してくれるサービス「embedresponsively.com」が 便利に使えそうだったので自分用メモとして紹介してみます。 embedresponsively.com 使い方は簡単で貼り付ける媒体を選択して 画面内の入力フォームに、動画ページのURLや埋め込みコードを入力して 「Embed」ボタンをクリックするだけ。 (入力するURLの内容は媒体によって違います。) クリック後は画面の下にレスポンシブ用のHTMLCSSのコードが生成されるので それを張り付ければいいだけ。 実際にYouTubeでコードを生成した場合は以下のような画面になります。 手軽に使えることと、CSSでどの値をどのようにすればレスポンシブ化できるか、 といっ

    YouTubeやGoogleマップやInstagramの埋込みを簡単にレスポンシブ化してくれるサービス「embedresponsively.com」|BLACKFLAG
    sima-box
    sima-box 2013/09/03
    動画レスポンシブ
  • 3 Cool Techniques For Your Next Web Design Project

    2017年3月27日 CSS, jQuery, Webサイト制作 Webデザインの勉強を始めたという方によく質問されるのが、「どうやって勉強すればいいですか?」。私はWeb制作の学校の学生だった頃から実践しているふたつの事があります。素敵だなって思えるWebサイトを見つけたら、どのように作られているのか自分なりに分析してみること。そしてそこで使われている技を実際に試してみること。そこで今日は最近見かけた素敵Webサイトと、そのサイトで使われていた技術を解説してみたいと思います! ↑私が10年以上利用している会計ソフト! 準備:分析&実践に役立つツール Chrome、Safariなら付属のデベロッパーツール ChromeとSafariならブラウザーにはじめからデベロッパーツールなる開発のためのツールがついています。私が愛用しているのはこのツール。表示しているWebページのHTMLCSSが確

    3 Cool Techniques For Your Next Web Design Project
    sima-box
    sima-box 2012/08/01
    動画を背景にするやり方教えている
  • 1