Youtube埋め込みで可変にする

ずっと知らなかったんですが、結構有名みたいです。

#mov_block {
position: relative;
width: 100%;
padding-top: 56.25%//calc(100% / 16 * 9);
}
#mov_block iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

calcがオブジェクト自身の位置やサイズなどを取得できればいいのに……できるのかな?

HTMLにSVGを配置

今更ながら、SVGを初めてWebサイトに使った際に、少々ハマったのでメモ。

HTML内に埋め込む際には、embedだったりobject又は、直接書き込んだりして使用するみたいなのですが、imgタグと同じように使ったらハマりました。
レスポンシブサイトでの利用は、トリミングされてしまったり、スクロールバーが出てしまった。
そこで、SVGファイルをテキストエディタで直接開いて、widthとheightを100%に書き換えたところ、ちゃんと表示されました。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="100%" height="100%" viewBox="0 0 300 200" enable-background="new 0 0 300 200"
	 xml:space="preserve">

また、書き方が悪かったのか、すごい環境依存がありました。
embedだとFirefoxの30でNGだったり、objectだとスクリプト使ってると結構表示されないことがあった。

IE8で表示させるためにsvg.jsというプラグインを使いました。
js読み込んでそれだけでは動かなかったため、サンプルのソースをみてみると、どうやらIE8ではFlashを使って表示させている模様。ダウンロードしたzipの中にsrcフォルダをそのままアップして、パスを下記のように記入。

<script type="text/javascript" src="common/js/svg.js" data-path="common/js/src"></script>

そしてHTMLの方は、

<!--[if !IE]>--><embed type="image/svg+xml" src="images/sample.svg" width="300" height="200" /><!--<![endif]-->
<!--[if lt IE 9]><object classid="image/svg+xml" src="images/sample.svg" width="300" height="200"></object><![endif]-->
<!--[if gte IE 9]><object type="image/svg+xml" data="images/sample.svg" width="300" height="200"></object><![endif]-->

という具合にすればOKです。

追記:2014/07/22
svgのサイズをリキッド対応させると、ieでsvg内にスクロールバーが出て、ずっと解決できなかったが、埋め込み方法をembedやobjectではなくimgタグにすることであっさり解決しました。html5ではimgタグでsvgがサポートされているようです。

<img type="image/svg+xml" src="images/sample.svg" width="300" height="200" />

一先ず、一件落着です。

追記:2014/08/20
Codoropsにとても参考になる記事が掲載されていました。
Making SVGs Responsive With CSS
このサイトはいつも勉強になるなぁ

追記:2014/10/19
SVGが表示されない時にMIME Typeを追加しても、変わらなかった際にFTPの転送モードを確認したい。
バイナリで転送すると壊れるようなので、.svgはASCIIに設定しておこう。