{"id":890,"date":"2016-02-18T08:21:47","date_gmt":"2016-02-17T23:21:47","guid":{"rendered":"http:\/\/makotohiroshige.com\/pclab\/?page_id=890"},"modified":"2016-02-18T08:21:47","modified_gmt":"2016-02-17T23:21:47","slug":"youtube-%e3%81%ae-iframe-%e3%81%ae%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%8c%96","status":"publish","type":"page","link":"https:\/\/pclab.makotohiroshige.com\/?page_id=890","title":{"rendered":"YouTube \u306e iframe \u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5316"},"content":{"rendered":"

\u3044\u304f\u3064\u304b\u306e CSS \u30c6\u30af\u30cb\u30c3\u30af\u3092\u4f7f\u3063\u3066\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3002<\/p>\n

CSS \u30d5\u30a1\u30a4\u30eb:<\/p>\n

\n\/* iframe \u3092\u56f2\u3080\u30dc\u30c3\u30af\u30b9(\u89aa\u30dc\u30c3\u30af\u30b9)\u306b\u5bfe\u3059\u308b\u6307\u5b9a *\/\n\n.youtube {\n  position : relative;\n  width : 100%;\n  padding-top : 56.25%;\n}\n\n\/* iframe \u305d\u306e\u3082\u306e\u306b\u5bfe\u3059\u308b\u6307\u5b9a *\/\n\n.youtube iframe {\n  position : absolute;\n  top: 0;\n  right: 0;\n  width : 100%!important;\n  height : 100%!important;\n}\n<\/pre>\n
HTML \u30d5\u30a1\u30a4\u30eb:<\/p>\n
\n<div class=\"youtube\">\n  <iframe width=\"560\" height=\"315\" src=\"\u2026..\" \u2026. >\n<\/div>\n<\/pre>\n
\u52d5\u4f5c\u306e\u6982\u8981<\/h3>\n
\u5916\u5074\u306e div.class \u30dc\u30c3\u30af\u30b9\u3067 16:9 \u306e\u7e26\u6a2a\u6bd4\u3092\u4fdd\u3063\u305f\u6a2a\u5e45\u3044\u3063\u3071\u3044\u306e\u30b9\u30da\u30fc\u30b9\u3092\u78ba\u4fdd\u3057\u3001\u5185\u5074\u306e <iframe> \u3067\u5916\u5074\u306e div.class \u30dc\u30c3\u30af\u30b9\u306e\u30b5\u30a4\u30ba\u3092\u53d6\u5f97\u3057\u3066\u52d5\u753b\u3092\u8868\u793a\u3059\u308b\u3002<\/p>\n
\u6a2a\u5e45\u3044\u3063\u3071\u3044\u306b\u914d\u7f6e\u3059\u308b\u5834\u5408<\/h3>\n
\u4e0a\u8a18\u306e\u4f8b\u306f YouTube \u306e\u52d5\u753b\u3092\u3001\u7f6e\u304b\u308c\u305f\u30d6\u30ed\u30c3\u30af\u306e\u6a2a\u5e45\u3044\u3063\u3071\u3044\u306b\u306a\u308b\u3088\u3046\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u8868\u793a\u3059\u308b\u3002<\/p>\n
16:9 \u306e\u30a2\u30b9\u30da\u30af\u30c8\u6bd4\u306f 100% : 56.25% \u3067\u3042\u308b\u3053\u3068\u304b\u3089\u3001\u3053\u306e\u6570\u5b57\u3092 padding-top \u306b\u7528\u3044\u3066\u3044\u308b\u3002\u30d1\u30fc\u30bb\u30f3\u30c8\u6307\u5b9a\u306e\u5834\u5408\u306f height \u3067\u3042\u3063\u3066\u3082 width \u306e\u5024\u306b\u5bfe\u3057\u3066\u4f55\u30d1\u30fc\u30bb\u30f3\u30c8\u304b\u3001\u3068\u3044\u3046\u610f\u5473\u306b\u306a\u308b\u3002<\/p>\n
\u5185\u90e8\u306e iframe \u306b\u3088\u308b\u30dc\u30c3\u30af\u30b9\u306f position : absolute; \u306a\u306e\u3067\u3001\u901a\u5e38\u30d5\u30ed\u30fc\u304b\u3089\u306f\u306f\u305a\u308c\u308b(CSS2.1 Specifications : 9.3)\u3002\u3057\u305f\u304c\u3063\u3066\u89aa\u30dc\u30c3\u30af\u30b9\u304b\u3089\u898b\u308b\u3068\u3001\u4e2d\u8eab\u306f\u7a7a\u306a\u306e\u3067\u3001\u4e2d\u8eab\u306e height \u306f 0 \u3067\u3042\u308b\u3002<\/p>\n
\u3053\u306e\u5834\u5408\u3053\u306e iframe \u306e\u30dc\u30c3\u30af\u30b9\u306e containing block \u306f\u3001\u89aa\u30dc\u30c3\u30af\u30b9\u305f\u3061\u306e\u3046\u3061\u3001position \u304c absolute, relative, fixed \u306e\u3069\u308c\u304b\u3092\u6307\u5b9a\u3055\u308c\u305f\u76f4\u8fd1\u306e\u89aa\u3067\u3042\u308b\u3002div.youtube \u306e\u30dc\u30c3\u30af\u30b9\u306b position: relative; \u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u306e\u306f\u3001iframe \u30dc\u30c3\u30af\u30b9\u306e containing block \u306b\u78ba\u5b9f\u306b\u306a\u308b\u305f\u3081\u3067\u3042\u308b\u3002<\/p>\n
div.youtube \u306e\u30dc\u30c3\u30af\u30b9\u306f\u3001\u4e2d\u8eab\u304c(\u6307\u5b9a\u306b\u3088\u308a)\u7a7a(\u6271\u3044)\u306a\u306e\u3067\u3001\u81ea\u8eab\u306e padding-top (\u3053\u306e\u5834\u5408) \u306e\u307f\u304c\u5185\u5bb9\u3068\u306a\u308b\u3002\u4eca div.youtube \u30dc\u30c3\u30af\u30b9\u306e\u5927\u304d\u3055\u306f padding edge \u306a\u306e\u3067\u3001\u3053\u308c\u306b\u3088\u308a\u3001\u6a2a\u5e45\u3092\u57fa\u6e96\u3068\u3057\u305f 16:9 (= 100% : 56.25% ) \u306e\u7e26\u6a2a\u6bd4\u3092\u4fdd\u3063\u305f\u300c\u30b9\u30da\u30fc\u30b9\u300d\u304c\u3001div.youtube \u30dc\u30c3\u30af\u30b9\u306b\u3088\u308a\u78ba\u4fdd\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308b\u3002<\/p>\n
\u5185\u90e8\u306e iframe \u306f\u3001position : absolute; \u306a\u306e\u3067\u3001containing block (= div.youtube \u30dc\u30c3\u30af\u30b9) \u306e top:0, right:0 (=\u53f3\u4e0a) \u3092\u57fa\u6e96\u3068\u3057\u3066\u914d\u7f6e\u3055\u308c\u308b\u3002\u6a2a\u5e45 width \u306f 100% \u304c\u5fc5\u305a\u9069\u7528\u3055\u308c\u3001\u3053\u308c\u306f containing block \u306e\u5e45\u3068\u306a\u308b\u3002height \u3082 100% \u3067 containing block \u306e\u9ad8\u3055\u3068\u306a\u308b\u3002\u3053\u306e width, height \u306f !important \u6307\u5b9a\u304c\u3042\u308b\u305f\u3081\u3001iframe \u30bf\u30b0\u306e\u4e2d\u306b\u6307\u5b9a\u3055\u308c\u305f\u5024\u306f\u7121\u8996\u3055\u308c\u3066\u3001CSS \u3067\u6307\u5b9a\u3057\u305f\u5024(containing block \u306e 100%)\u3068\u306a\u308b\u3002<\/p>\n
\u4ee5\u4e0a\u306b\u3088\u308a\u3001\u305d\u306e\u3068\u304d\u306b\u6a2a\u5e45\u306b\u5408\u308f\u305b\u3066\u3001\u7e26\u6a2a\u6bd4\u3092\u4fdd\u3063\u305f\u307e\u307e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306b\u4f38\u7e2e\u3059\u308b\u3053\u3068\u3092\u5b9f\u73fe\u3067\u304d\u308b\u3002<\/p>\n
\u5de6\u53f3\u306b\u3084\u3084\u30b9\u30da\u30fc\u30b9\u3092\u3068\u3063\u3066\u914d\u7f6e\u3059\u308b\u3068\u304d<\/h3>\n
\u5de6\u53f3\u306b\u3084\u3084\u30b9\u30da\u30fc\u30b9\u3092\u53d6\u3063\u3066\u914d\u7f6e\u3059\u308b\u3068\u304d\u306f\u3001\u30d1\u30fc\u30bb\u30f3\u30c8\u306e\u5024\u3092\u8abf\u6574\u3059\u308b\u3002<\/p>\n
\u4f8b: \u6a2a\u5e45\u3092 90% \u306b\u3057\u305f\u3044(=\u53f35%\u6e1b\u5c11\u3001\u5de65%\u6e1b\u5c11)\u3002<\/p>\n
100% x 0.9 = 90%, 56.25% x 0.9 = 50.625%<\/p>\n
\n\/* iframe \u3092\u56f2\u3080\u30dc\u30c3\u30af\u30b9(\u89aa\u30dc\u30c3\u30af\u30b9)\u306b\u5bfe\u3059\u308b\u6307\u5b9a *\/\n\n.youtube {\n  position : relative;\n  width : 90%;\n  padding-top : 50.625%;\n}\n\n\/* iframe \u305d\u306e\u3082\u306e\u306b\u5bfe\u3059\u308b\u6307\u5b9a *\/\n\n.youtube iframe {\n  position : absolute;\n  top: 0;\n  right: -5%;\n  width : 100%!important;\n  height : 100%!important;\n}\n<\/pre>\n
HTML \u30d5\u30a1\u30a4\u30eb:<\/p>\n
\n<div class=\"youtube\">\n  <iframe width=\"560\" height=\"315\" src=\"\u2026..\" \u2026. >\n<\/div>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
\u3044\u304f\u3064\u304b\u306e CSS \u30c6\u30af\u30cb\u30c3\u30af\u3092\u4f7f\u3063\u3066\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\u3002 CSS \u30d5\u30a1\u30a4\u30eb: \/* iframe \u3092\u56f2\u3080\u30dc\u30c3\u30af\u30b9(\u89aa\u30dc\u30c3\u30af\u30b9)\u306b\u5bfe\u3059\u308b\u6307\u5b9a *\/ .youtube { position : relative; wi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":739,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-890","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/890","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=890"}],"version-history":[{"count":0,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/890\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=\/wp\/v2\/pages\/739"}],"wp:attachment":[{"href":"https:\/\/pclab.makotohiroshige.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}