{"id":2664,"date":"2015-09-24T18:01:33","date_gmt":"2015-09-24T09:01:33","guid":{"rendered":"http:\/\/www.dream-net.org\/blog\/?p=2664"},"modified":"2015-10-28T11:05:50","modified_gmt":"2015-10-28T02:05:50","slug":"%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c%ef%bc%81youtube%e5%8b%95%e7%94%bb%e3%82%92%e8%83%8c%e6%99%af%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8bjquery","status":"publish","type":"post","link":"https:\/\/dream-net.org\/blog\/?p=2664","title":{"rendered":"\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff01YOUTUBE\u52d5\u753b\u3092\u80cc\u666f\u306b\u8868\u793a\u3055\u305b\u308bjQuery\u30d7\u30e9\u30b0\u30a4\u30f3"},"content":{"rendered":"<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#YOUTUBEjQuery\"><span class=\"toc_number toc_depth_1\">1<\/span> \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff01YOUTUBE\u52d5\u753b\u3092\u80cc\u666f\u306b\u8868\u793a\u3055\u305b\u308bjQuery\u30d7\u30e9\u30b0\u30a4\u30f3<\/a><\/li><li><a href=\"#1\"><span class=\"toc_number toc_depth_1\">2<\/span> 1.\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a><\/li><li><a href=\"#2\"><span class=\"toc_number toc_depth_1\">3<\/span> 2.\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080<\/a><\/li><li><a href=\"#3HTML\"><span class=\"toc_number toc_depth_1\">4<\/span> 3.HTML\u3092\u8a18\u8ff0<\/a><\/li><li><a href=\"#4\"><span class=\"toc_number toc_depth_1\">5<\/span> 4.\u30d1\u30bf\u30fc\u30f3\u3092\u8ffd\u52a0<\/a><\/li><li><a href=\"#5\"><span class=\"toc_number toc_depth_1\">6<\/span> 5.\u30e2\u30d0\u30a4\u30eb\u7528\u80cc\u666f\u753b\u50cf\u306e\u8a2d\u5b9a<\/a><\/li><\/ul><\/div>\n<h2 style=\"color: #134985; background: #fffd73; padding:5px;\"><span id=\"YOUTUBEjQuery\">\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\uff01YOUTUBE\u52d5\u753b\u3092\u80cc\u666f\u306b\u8868\u793a\u3055\u305b\u308bjQuery\u30d7\u30e9\u30b0\u30a4\u30f3<\/span><\/h2>\n<p>\u753b\u9762\u3044\u3063\u3071\u3044\u306e\u52d5\u753b\u3092\u80cc\u666f\u306b\u3057\u3066\u3001\u30e9\u30a4\u30d6\u611f\u3092\u6f14\u51fa\u3057\u3066\u3044\u308b\u30b5\u30a4\u30c8\u304c\u5897\u3048\u3066\u3044\u307e\u3059\u3002\u4eca\u56de\u306f\u3001YOUTUBE\u306e\u52d5\u753b\u3092\u80cc\u666f\u306b\u3059\u308bjQuery\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u3054\u7d39\u4ecb\u3002\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u3082\u3055\u308c\u3066\u3044\u3066\u3001\u753b\u9762\u30b5\u30a4\u30ba\u3092\u52d5\u304b\u3059\u3068\u52d5\u753b\u30b5\u30a4\u30ba\u3082\u30b9\u30e0\u30fc\u30ba\u306b\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f\u30c7\u30e2\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><a href=\"http:\/\/designmodo.com\/demo\/videobackground\/\" target=\"_blank\"><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2015\/09\/0117.jpg\"><\/a><\/p>\n<p>\u3068\u3066\u3082\u306a\u3081\u3089\u304b\u3067\u304d\u308c\u3044\u306b\u52d5\u3044\u3066\u3044\u307e\u3059\u3002YOUTUBE\u304b\u3089\u76f4\u63a5\u30ed\u30fc\u30c9\u3059\u308b\u306e\u3067\u3001\u30b5\u30fc\u30d0\u30fc\u306b\u8ca0\u8377\u304c\u304b\u304b\u3089\u306a\u3044\u3068\u3044\u3046\u30e1\u30ea\u30c3\u30c8\u304c\u5927\u304d\u3044\u3067\u3059\u306d\u3002<br \/>\n  \u30b9\u30af\u30ea\u30d7\u30c8\u306b\u306f\u300cjQuery.mb.YTPlayer.js\u300d\u3068\u3044\u3046\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u3063\u3066\u3044\u3066\u3001\u3053\u308c\u3092\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3057\u305f\u3082\u306e\u3060\u305d\u3046\u3067\u3059\u3002<br \/>\n  \u672c\u5bb6\u306e\u30b3\u30fc\u30c9\u306f<a href=\"https:\/\/github.com\/pupunzi\/jquery.mb.YTPlayer\" target=\"_blank\">GitHub<\/a>\u3067\u516c\u958b\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u305d\u308c\u3067\u306f\u3001\u3055\u3063\u305d\u304f\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><strong>\u203b\u6ce8\u610f\u70b9<br \/>\n\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u4f7f\u7528\u3059\u308b\u306b\u3042\u305f\u3063\u3066\u3001\u52d5\u753b\u306e\u9577\u3055\u306f15\u301c30\u79d2\u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/strong><\/p>\n<h2 style=\"color:#134985; margin-top:70px\"><span id=\"1\">1.\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/span><\/h2>\n<p>\u30bd\u30fc\u30b9\u4e00\u5f0f\u306f<a href=\"http:\/\/designmodo.com\/video-background-website\/\" target=\"_blank\">\u3053\u3061\u3089\u306e\u8a18\u4e8b<\/a>\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002<br \/>\n  \u4e2d\u306b\u306f\u3001\u30b5\u30f3\u30d7\u30eb\u306eindex.html\u30d5\u30a1\u30a4\u30eb\u304c\u5165\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u3061\u3089\u3092\u53c2\u7167\u306b\u3059\u308b\u3068\u5206\u304b\u308a\u3084\u3059\u3044\u3067\u3059\u3002\n<\/p>\n<h2 style=\"color:#134985; margin-top:70px\"><span id=\"2\">2.\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u3080<\/span><\/h2>\n<p>&lt;head&gt;\u5185\u3067css\u3068js\u30d5\u30a1\u30a4\u30eb\u3092\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002<br \/>\n  \u5408\u8a088\u3064\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308a\u307e\u3059\u304c\u3001css\u306b\u95a2\u3057\u3066\u306f\u3001style.css\u306e\u307f\u8aad\u307f\u8fbc\u3081\u3070\u6b63\u5e38\u306b\u52d5\u304d\u307e\u3059\u3002Google\u30d5\u30a9\u30f3\u30c8\u3084Font Awesome\u306e\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306f\u5fc5\u8981\u306b\u5fdc\u3058\u3066\u8aad\u307f\u8fbc\u3080\u3068\u3044\u3044\u3067\u3057\u3087\u3046\u3002<br \/>\nJS\u30d5\u30a1\u30a4\u30eb\u306f\uff14\u3064\u5168\u3066\u3092\u8aad\u307f\u8fbc\u3080\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p style=\"margin-bottom:20px; margin-top:40px; color:#960\"><strong>[HTML]<\/strong>(head)<\/p>\n<div style=\"margin:10px 0px 30px 0px;  border:dotted #960 1px; background: #FDF9E8; padding:20px; color: #960\" >\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/normalize.css&quot; media=&quot;all&quot;&gt;<br \/>\n  &lt;link rel=&quot;stylesheet&quot; href=&quot;css\/style.css&quot; media=&quot;all&quot;&gt;<br \/>\n  &lt;link href=&#8217;http:\/\/fonts.googleapis.com\/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,700,600,800,900&#8242; rel=&#8217;stylesheet&#8217; type=&#8217;text\/css&#8217;&gt;<br \/>\n  &lt;link href=&quot;http:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.2.0\/css\/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;<br \/>\n  &lt;script src=&quot;js\/jquery-1.11.1.min.js&quot;&gt;&lt;\/script&gt;<br \/>\n  &lt;script src=&quot;js\/device.min.js&quot;&gt;&lt;\/script&gt; <br \/>\n  &lt;script src=&quot;js\/jquery.mb.YTPlayer.js&quot;&gt;&lt;\/script&gt;<br \/>\n  &lt;script src=&quot;js\/custom.js&quot;&gt;&lt;\/script&gt; <\/p>\n<\/div>\n<h2 style=\"color:#134985; margin-top:70px\"><span id=\"3HTML\">3.HTML\u3092\u8a18\u8ff0<\/span><\/h2>\n<p>\u80cc\u666f\u52d5\u753b\u90e8\u5206\u306e\u8a18\u8ff0\u306f\u3053\u3061\u3089\u3002<\/p>\n<p style=\"margin-bottom:20px; margin-top:40px; color:#960\"><strong>[HTML]<\/strong><\/p>\n<div style=\"margin:10px 0px 30px 0px;  border:dotted #960 1px; background: #FDF9E8; padding:20px; color: #960\" >\n  &lt;section class=&quot;big-background&quot;&gt; <br \/>\n  &lt;a id=&quot;bgndVideo&quot; class=&quot;player&quot; data-property=&quot;{videoURL:&#8217;https:\/\/www.youtube.com\/watch?v=iNJdPyoqt8U&#8217;,containment:&#8217;body&#8217;,autoPlay:true, mute:true, startAt:0, opacity:1}&quot;&gt;&lt;\/a&gt;<br \/>\n&lt;\/section&gt; <\/p>\n<\/div>\n<p>data-property\u306e\u4e2d\u8eab\u306f\u3053\u306e\u3088\u3046\u306b\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n<ul style=\"list-style:none; padding-left:0\">\n<li><strong>containment<\/strong>\u30fb\u30fb\u30fb\u80cc\u666f\u52d5\u753b\u3092\u8868\u793a\u3055\u305b\u308b\u8981\u7d20<\/li>\n<li><strong>autoPlay<\/strong>\uff1a\u81ea\u52d5\u518d\u751f<\/li>\n<li><strong>mute<\/strong>:\u30df\u30e5\u30fc\u30c8<\/li>\n<li><strong>startAT<\/strong>\uff1a\u518d\u751f\u3092\u958b\u59cb\u3057\u305f\u3044\u30bf\u30a4\u30e0\u30e9\u30a4\u30f3<\/li>\n<li><strong>opacity<\/strong>\uff1a\u4e0d\u900f\u660e\u5ea6<\/li>\n<\/ul>\n<h2 style=\"color:#134985; margin-top:70px\"><span id=\"4\">4.\u30d1\u30bf\u30fc\u30f3\u3092\u8ffd\u52a0<\/span><\/h2>\n<p>\u30c7\u30e2\u3067\u306f\u3001\u52d5\u753b\u306b\u30d5\u30a3\u30eb\u30bf\u3092\u304b\u3051\u308b\u3053\u3068\u3067\u6697\u304f\u3057\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u8aad\u307f\u3084\u3059\u304f\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p style=\"margin-top:40px;\">\u30d5\u30a3\u30eb\u30bf\u306a\u3057<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2015\/09\/0216.jpg\"><\/p>\n<p style=\"margin-top:40px;\">\u30d5\u30a3\u30eb\u30bf\u3042\u308a<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.dream-net.org\/blog\/wp-content\/uploads\/2015\/09\/0315.jpg\"><\/p>\n<p>big-background\u30bb\u30af\u30b7\u30e7\u30f3\u5185\u3067\u3001\u52d5\u753b\u306e\u5f8c\u306b\u6b21\u306e\u30b3\u30fc\u30c9\u3092\u633f\u5165\u3059\u308b\u3068\u52d5\u753b\u306e\u4e0a\u306b\u30d1\u30bf\u30fc\u30f3\u304c\u4e57\u308a\u307e\u3059\u3002<\/p>\n<p style=\"margin-bottom:20px; margin-top:40px; color:#960\"><strong>[HTML]<\/strong><\/p>\n<div style=\"margin:10px 0px 30px 0px;  border:dotted #960 1px; background: #FDF9E8; padding:20px; width:500px; color: #960\" >\n  &lt;div class=&quot;pattern&quot;&gt;&lt;\/div&gt;<\/div>\n<h2 style=\"color:#134985; margin-top:70px\"><span id=\"5\">5.\u30e2\u30d0\u30a4\u30eb\u7528\u80cc\u666f\u753b\u50cf\u306e\u8a2d\u5b9a<\/span><\/h2>\n<p>\u30b9\u30de\u30db\u306a\u3069\u306e\u30e2\u30d0\u30a4\u30eb\u7aef\u672b\u3067\u306f\u3001\u52d5\u753b\u3067\u306f\u306a\u304f\u80cc\u666f\u753b\u50cf\u304c\u753b\u9762\u3044\u3063\u3071\u3044\u306b\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n  style.css\u306e134\u884c\u76ee\u3067\u8a2d\u5b9a\u3067\u304d\u308b\u306e\u3067\u3001\u597d\u307f\u306e\u753b\u50cf\u306b\u5909\u66f4\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p style=\"margin-bottom:20px; margin-top:40px; color:#069\"><strong>[CSS]<\/strong><\/p>\n<div style=\"margin:20px 0px; border:dotted #369 1px; background:#E0F1F1; padding:20px; width:500px; color:#069\" >\n  .big-background-default-image {<br \/>\n  background:url(..\/images\/image.jpg); \/\/\u3053\u3053\u306b\u753b\u50cf\u3092\u5165\u308c\u308b<br \/>\n  background-repeat:no-repeat;<br \/>\n  background-position:center center;<br \/>\n  background-size:cover;<br \/>\n  width:100%;<br \/>\n  height:100%;<br \/>\n  z-index:0;<br \/>\n  backface-visibility:hidden<br \/>\n  }\n<\/div>\n<p style=\"margin-top: 70px;\">\u81ea\u793e\u30b5\u30fc\u30d0\u30fc\u306b\u52d5\u753b\u3092\u7f6e\u304f\u3088\u308a\u3082\u3001\u305a\u3063\u3068\u624b\u8efd\u3067\u3059\u3002<br \/>\n  \u8ca0\u8377\u304c\u6c17\u306b\u306a\u308b\u65b9\u306f\u4e00\u5ea6\u8a66\u3057\u3066\u307f\u3066\u306f\u3044\u304b\u304c\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u753b\u9762\u3044\u3063\u3071\u3044\u306e\u52d5\u753b\u3092\u80cc\u666f\u306b\u3057\u3066\u3001\u30e9\u30a4\u30d6\u611f\u3092\u6f14\u51fa\u3057\u3066\u3044\u308b\u30b5\u30a4\u30c8\u304c\u5897\u3048\u3066\u3044\u307e\u3059\u3002\u4eca\u56de\u306f\u3001YOUTUBE\u306e\u52d5\u753b\u3092\u80cc\u666f\u306b\u3059\u308bjQuery\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u3054\u7d39\u4ecb\u3002\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u3082\u3055\u308c\u3066\u3044\u3066\u3001\u753b\u9762\u30b5\u30a4\u30ba\u3092\u52d5\u304b\u3059\u3068\u52d5\u753b\u30b5\u30a4\u30ba\u3082\u30b9\u30e0\u30fc\u30ba\u306b\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"author":1,"featured_media":2662,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[50,49,45],"tags":[],"class_list":["post-2664","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-jquery","category-web"],"_links":{"self":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2664"}],"version-history":[{"count":4,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2664\/revisions"}],"predecessor-version":[{"id":2668,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2664\/revisions\/2668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=\/wp\/v2\/media\/2662"}],"wp:attachment":[{"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dream-net.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}