{"id":430,"date":"2022-02-18T22:44:03","date_gmt":"2022-02-18T13:44:03","guid":{"rendered":"https:\/\/engineering.webstudio168.jp\/?p=430"},"modified":"2022-03-18T11:26:23","modified_gmt":"2022-03-18T02:26:23","slug":"n-sta-youtube","status":"publish","type":"post","link":"https:\/\/engineering.webstudio168.jp\/blog\/n-sta-youtube\/","title":{"rendered":"N\u30b9\u30bf\uff08\u30cb\u30e5\u30fc\u30b9\u756a\u7d44\uff09\u98a8\u306eYoutube\u30c6\u30ed\u30c3\u30d7\u3092HTML+CSS\u3067\u4f5c\u3063\u3066\u307f\u305f"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u6bce\u65e5N\u30b9\u30bf\uff08TBS\uff09\u3092\u898b\u3066\u3044\u3066\u3001\u30ea\u30b9\u30da\u30af\u30c8\u3092\u8fbc\u3081\u3066N\u30b9\u30bf\u98a8Youtube\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002HTML\u3068CSS\u3068YTPlayer.js\u3067\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30c6\u30ed\u30c3\u30d7\u90e8\u5206\u306f\u753b\u50cf\u7121\u3057\u3067CSS\u3067\u8abf\u6574\u3057\u3066\u3044\u307e\u3059\u3002\u3060\u3044\u3076N\u30b9\u30bf\u98a8\u306b\u306a\u3063\u305f\u306e\u3067\u826f\u304b\u3063\u305f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Youtube\u306e\u547c\u3073\u51fa\u3057\u306fYTPlayer\u3068\u3044\u3046jQuery\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u4f7f\u3063\u3066\u3044\u307e\u3059\u3002<br>YTPlayer\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u4e0b\u8a18\u306b\u307e\u3068\u3081\u3066\u3044\u308b\u306e\u3067\u898b\u3066\u307f\u3066\u4e0b\u3055\u3044\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-qootechweb wp-block-embed-qootechweb\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"7BqlCobpOs\"><a href=\"https:\/\/engineering.webstudio168.jp\/blog\/ytplayer-options\/\">YTPlayer\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\u3057\u3088\u3046\u3002\u51fa\u6765\u308b\u3053\u3068\u3002<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u201cYTPlayer\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u5b8c\u5168\u30de\u30b9\u30bf\u30fc\u3057\u3088\u3046\u3002\u51fa\u6765\u308b\u3053\u3068\u3002\u201d \u2014 QooTechWEB-\u958b\u767a\u30ed\u30b0\u30fb\u5b9f\u52d9\u8a18\u9332\u30d6\u30ed\u30b0\" src=\"https:\/\/engineering.webstudio168.jp\/blog\/ytplayer-options\/embed\/#?secret=tGfP5eBhSR#?secret=7BqlCobpOs\" data-secret=\"7BqlCobpOs\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption>jQuery\u30d7\u30e9\u30b0\u30a4\u30f3\u300cYTPlayer\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u307e\u3068\u3081\u300d<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n\n\n\n<iframe id=\"Nsta\" src=\"\/sample\/TVPlayer\/\" style=\"width: 100%;\"><\/iframe>\n<script>\njQuery(function($){\n  var w = $('#Nsta').width();\n  $('#Nsta').height(w * 0.56);\n});\n<\/script>\n<style>\n#Nsta { border: none; }\n<\/style>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/engineering.webstudio168.jp\/sample\/TVPlayer\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u5168\u753b\u9762\u8868\u793aVer<\/a>\u3082\u3042\u308a\u307e\u3059\u306e\u3067\u826f\u304b\u3063\u305f\u3089\u898b\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002PC\u3067\u898b\u305f\u65b9\u304cTV\u611f\u304c\u3042\u3063\u3066\u826f\u3055\u3052\u3002<br>\u6642\u9593\u306f\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u306a\u308b\u3088\u3046\u306bJavaScript\u3067\u51e6\u7406\u3057\u3066\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d6\u30fc\u30ca\u3061\u3083\u3093\u3082\u559c\u3093\u3067\u304f\u308c\u308b\u304b\u306a\u3041\u3002\u570b\u672c\u3055\u3093\u306b\u3082\u898b\u3066\u3082\u3089\u3044\u305f\u3044\u306a\u3041\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5143\u306e\u52d5\u753b\u306f<a href=\"https:\/\/youtu.be\/P0qOt4LwmVc\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/P0qOt4LwmVc<\/a>\u3067\u3059\u3002<br>\u7a81\u8cab\u3067\u4f5c\u3063\u305f\u306e\u3067\u7c97\u3044\u30bd\u30fc\u30b9\u3067\u3059\u304c\u3001\u4e00\u5fdc\u306e\u63b2\u8f09\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism undefined-numbers lang-html\" data-file=\"index.html\" data-lang=\"HTML\"><code>&lt;div class=&quot;video-wrapper&quot;&gt;\n &lt;div class=&quot;mainBox&quot;&gt;\n  &lt;div class=&quot;tvHeader&quot;&gt;\n   &lt;div class=&quot;headLeft&quot;&gt;\n    &lt;div class=&quot;logo&quot;&gt;&lt;span class=&quot;respect&quot;&gt;N&lt;\/span&gt;&lt;br&gt;\n     QTW&lt;\/div&gt;\n    &lt;div id=&quot;RealtimeClockArea2&quot; class=&quot;nowTime&quot;&gt;00:00&lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;div class=&quot;headRight&quot;&gt;\n    &lt;div class=&quot;headRight-innter&quot;&gt;\n     &lt;div class=&quot;topicName&quot;&gt;\u901f\u5831&lt;\/div&gt;\n     &lt;div class=&quot;topicDescription&quot;&gt;\u304f\u3045\u3061\u3083\u3093\u3001\u30b7\u30e3\u30f3\u30d7\u30fc\u4e2d&lt;\/div&gt;\n     &lt;div class=&quot;topicSubDescription&quot;&gt;\u6bdb\u304c\u7121\u304f\u3066\u3082\u2026\u2026&lt;\/div&gt;\n    &lt;\/div&gt;\n   &lt;\/div&gt;\n  &lt;\/div&gt;\n &lt;\/div&gt;\n &lt;div class=&quot;qoopl&quot;&gt;&lt;\/div&gt;\n &lt;div id=&quot;videoPlay01&quot; data-property=&quot;{\n\t\t\tvideoURL: &#39;https:\/\/youtu.be\/P0qOt4LwmVc&#39;,\n   useOnMovile: true,\n\t\t\tcontainment: &#39;.qoopl&#39;,\n   showControls: false,\n\t\t\tmute: true,\n   loop: true,\n   showYTLogo: false,\n   stopMovieOnBlur: false,\n   optimizeDisplay: false,\n   autoPlay: true,\n   YTLogo: false\n   }&quot;&gt; &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism undefined-numbers lang-css\" data-file=\"\u30a4\u30f3\u30e9\u30a4\u30f3CSS\" data-lang=\"CSS\"><code>&lt;style&gt;\n#videoPlay01 {\n z-index: 1;\n}\n.inline-YTPlayer {\n max-width: 100% !important;\n}\n.mainBox {\n position: relative;\n width: 100%;\n height: auto;\n background-color: transparent;\n z-index: 100;\n}\n.mainBox img {\n width: 100%;\n opacity: .4;\n}\n.video-wrapper {\n width: 100%;\n height: auto;\n position: relative;\n max-width: 1400px;\n margin: 0 auto;\n}\n.tvHeader {\n position: relative;\n}\n.headLeft, .headRight .topicDescription {\n background-color: #ff8a50;\n color: #FFF;\n margin-top: 1.5vw;\n}\n.headLeft {\n position: absolute;\n display: flex;\n align-items: center;\n line-height: 1;\n padding: 0.5rem 0;\n border-radius: 0 1.8rem 1.8rem 0;\n}\n.headLeft .logo {\n margin-left: 1.8vw;\n font-size: 1.8vw;\n text-align: center;\n}\n.headLeft .nowTime {\n margin-left: 1vw;\n padding-right: 2vw;\n font-size: 4.8vw;\n font-family: &#39;Noto Sans&#39;, sans-serif;\n}\n.headRight {\n position: absolute;\n right: 0;\n display: flex;\n align-items: center;\n font-family: &#39;Noto Sans JP&#39;, sans-serif;\n}\n.headRight .topicDescription {\n font-size: 2.6vw;\n padding: 1.2vw 1.4vw 1.2vw 6vw;\n}\n.headRight-innter {\n position: relative;\n}\n.headRight-innter .topicName {\n display: block;\n border-radius: 50%;\n background: #FFF;\n color: #ff8a50;\n font-size: 3vw;\n font-weight: 800;\n position: absolute;\n left: -5.5vw;\n top: 0.2vw;\n padding: 1.7vw 1vw;\n background-clip: padding-box;\n border: 0.6vw solid rgba(255,255,255,0.5);\n}\n.topicSubDescription {\n text-align: center;\n color: #ff8a50;\n background: #FFF;\n border-radius: 0 0 0 2.5vw;\n width: 80%;\n float: right;\n font-size: 2.4vw;\n padding-bottom: 0.5vw;\n}\n .qoopl {\n  padding-bottom: 56%;\n }\n .respect {\n  font-size: 140%;\n  font-weight: bold;\n }\n&lt;\/style&gt;<\/code><\/pre><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism undefined-numbers lang-js\" data-file=\"JavaScript\u95a2\u4fc2\" data-lang=\"JavaScript\"><code>&lt;script&gt;\nfunction set2fig(num) {\n   \/\/ \u6841\u6570\u304c1\u6841\u3060\u3063\u305f\u3089\u5148\u982d\u306b0\u3092\u52a0\u3048\u30662\u6841\u306b\u8abf\u6574\u3059\u308b\n   var ret;\n   if( num &lt; 10 ) { ret = &quot;0&quot; + num; }\n   else { ret = num; }\n   return ret;\n}\nfunction showClock2() {\n   var nowTime = new Date();\n   var nowHour = set2fig( nowTime.getHours() );\n   var nowMin  = set2fig( nowTime.getMinutes() );\n   var nowSec  = set2fig( nowTime.getSeconds() );\n   var msg = nowHour + &quot;:&quot; + nowMin;\n   document.getElementById(&quot;RealtimeClockArea2&quot;).innerHTML = msg;\n}\nsetInterval(&#39;showClock2()&#39;,1000);\n\n$(function () {\n $(&#39;#videoPlay01&#39;).YTPlayer();\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30bd\u30fc\u30b9\u8f09\u305b\u307e\u3057\u305f\u304c\u3001\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u3067\u78ba\u8a8d\u3057\u305f\u307b\u3046\u304c\u5206\u304b\u308a\u3084\u3059\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br>\u9700\u8981\u304c\u3042\u308c\u3070\u3001\u30d0\u30a4\u30ad\u30f3\u30b0\u98a8\u3068\u304b\u3072\u308b\u304a\u3073\uff01\u98a8\u3068\u304b\u3082\u4f5c\u308b\u304b\u3082\uff1f\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6bce\u65e5N\u30b9\u30bf\uff08TBS\uff09\u3092\u898b\u3066\u3044\u3066\u3001\u30ea\u30b9\u30da\u30af\u30c8\u3092\u8fbc\u3081\u3066N\u30b9\u30bf\u98a8Youtube\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002HTML\u3068CSS\u3068YTPlayer.js\u3067\u4f5c\u6210\u3057\u3066\u3044\u307e\u3059\u3002 \u30c6\u30ed\u30c3\u30d7\u90e8\u5206\u306f\u753b\u50cf\u7121\u3057\u3067CSS\u3067\u8abf\u6574\u3057\u3066\u3044\u307e\u3059\u3002\u3060\u3044\u3076N\u30b9\u30bf\u98a8\u306b\u306a\u3063\u305f\u306e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":447,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[51,50,21,33],"class_list":["post-430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-css","tag-html","tag-jquery","tag-ytplayer"],"_links":{"self":[{"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/posts\/430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/comments?post=430"}],"version-history":[{"count":24,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/posts\/430\/revisions"}],"predecessor-version":[{"id":487,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/posts\/430\/revisions\/487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/media\/447"}],"wp:attachment":[{"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/media?parent=430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/categories?post=430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/engineering.webstudio168.jp\/blog\/wp-json\/wp\/v2\/tags?post=430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}