{"id":177,"date":"2022-06-07T17:03:11","date_gmt":"2022-06-07T08:03:11","guid":{"rendered":"http:\/\/gaku-on.com\/?p=177"},"modified":"2022-06-07T17:03:11","modified_gmt":"2022-06-07T08:03:11","slug":"mp4%e8%83%8c%e6%99%af%e7%94%bb%e5%83%8f%e3%81%a7%e7%94%bb%e9%9d%a2%e4%b8%80%e6%9d%af%e3%81%ab","status":"publish","type":"post","link":"http:\/\/gaku-on.com\/?p=177","title":{"rendered":"MP4\u80cc\u666f\u753b\u50cf\u3067\u753b\u9762\u4e00\u676f\u306b"},"content":{"rendered":"\n<p>\u53c2\u8003\u30b5\u30a4\u30c8\u306f\u4ee5\u4e0b<br>https:\/\/designsupply-web.com\/media\/programming\/4190\/<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>HTML\n&lt;div class=\"bg-video-wrap\">\r\n  &lt;video src=\"&lt;?php bloginfo('stylesheet_directory'); ?>\/img\/movie.mp4\" loop muted autoplay> &lt;\/video>\r\n  &lt;div class=\"overlay\">\r\n    &lt;div class=\"maincopy\">\r\n      &lt;div class=\"maincopy1\">\u4eba\u3068\u8857\u3002\u5927\u5207\u306a\u672a\u6765\u3078\u3002&lt;\/div>\r\n      &lt;div class=\"maincopy2\">TOMOKIgroup\u306f\u5e38\u306b\u672a\u6765\u3092\u898b\u636e\u3048&lt;br>\r\n        \u6280\u8853\u306e\u7fd2\u5f97\u30fb\u4eba\u6750\u306e\u80b2\u6210\u306a\u3069\u660e\u65e5\u3078\u7e4b\u3052\u3066\u3044\u304f&lt;br>\r\n        \u4f01\u696d\u52aa\u529b\u3092\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3063\u3066\u3044\u307e\u3059\u3002&lt;\/div>\r\n    &lt;\/div>\r\n  &lt;\/div>\r\n&lt;\/div><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>CSS\u306f\u4ee5\u4e0b\n\n.bg-video-wrap {\r\n  position: relative;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: url(.\/sapmle.png) no-repeat center center\/cover;\r\n}\r\nvideo {\r\n  min-width: 100%;\r\n  min-height: 100vh;\r\n  z-index: 1;\r\n}\r\n.overlay {\r\n    width: 100%;\r\n    height: 100vh;\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);\r\n    background-size: 4px 4px;\r\n    z-index: 2;\r\n    text-align: center;\r\n}\r\n\n.maincopy{\r\n    position: absolute;\r\n    top: 40%;\r\n    left: 50%;\r\n    -webkit-transform: translate(-50%, -50%); \/* Safari\u7528 *\/\r\n    transform: translate(-50%, -50%);\r\n \r\n    font-family: \"Sawarabi Mincho\";\r\n   \r\n}\r\n\r\n.maincopy1{\r\n    font-size: 400%;\r\n    margin-bottom: 45px;\r\n    color: #fff;\r\n}\r\n\r\n.maincopy2{\r\n    font-size: 140%;\r\n    line-height: 200%;color: #fff;\r\n}\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u53c2\u8003\u30b5\u30a4\u30c8\u306f\u4ee5\u4e0bhttps:\/\/designsup&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-177","post","type-post","status-publish","format-standard","hentry","category-jquery-js"],"_links":{"self":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=177"}],"version-history":[{"count":2,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":179,"href":"http:\/\/gaku-on.com\/index.php?rest_route=\/wp\/v2\/posts\/177\/revisions\/179"}],"wp:attachment":[{"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gaku-on.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}