るサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。

s5-style のブックマーク 2011/06/04 18:44

<blockquote class="hatena-bookmark-comment"><a class="comment-info" href="https://b.hatena.ne.jp/entry/44807882/comment/s5-style" data-user-id="s5-style" data-entry-url="https://b.hatena.ne.jp/entry/s/webdesignerwall.com/tutorials/css-elastic-videos" data-original-href="https://webdesignerwall.com/tutorials/css-elastic-videos" data-entry-favicon="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebdesignerwall.com%2Ftutorials%2Fcss-elastic-videos" data-user-icon="/users/s5-style/profile.png">CSS: Elastic Videos - Web Designer Wall</a><ul class="comment-tag" style="list-style: none; margin: 0px;"><li style="float: left">[<a href="https://b.hatena.ne.jp/q/html5">html5</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E5%8B%95%E7%94%BB">動画</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%83%AA%E3%82%AD%E3%83%83%E3%83%89">リキッド</a>]</li><li style="float: left">[<a href="https://b.hatena.ne.jp/q/%E3%83%86%E3%82%A3%E3%83%83%E3%83%97%E3%82%B9">ティップス</a>]</li></ul><br><p style="clear: left">るサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。</p><a class="datetime" href="https://b.hatena.ne.jp/s5-style/20110604#bookmark-44807882"><span class="datetime-body">2011/06/04 18:44</span></a></blockquote><script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async></script>

このブックマークにはスターがありません。
最初のスターをつけてみよう！

CSS: Elastic Videos - Web Designer Wall

webdesignerwall.com2011/05/31

While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and...

64 人がブックマーク・18 件のコメント

他のコメントを読む

＼コメントがサクサク読めるアプリです／

はてなブックマーク

CSS: Elastic Videos - Web Designer Wall

はてなブックマーク

公式Twitter

はてなのサービス