{"id":9170,"date":"2023-12-21T11:04:47","date_gmt":"2023-12-21T02:04:47","guid":{"rendered":"https:\/\/takuyakobayashi.jp\/blog\/?p=9170"},"modified":"2024-10-24T22:24:18","modified_gmt":"2024-10-24T13:24:18","slug":"ios-safari%e3%81%a7ytplayer%e3%81%ae%e8%87%aa%e5%8b%95%e5%86%8d%e7%94%9f%e3%81%8c%e5%8a%b9%e3%81%8b%e3%81%aa%e3%81%84%e4%bb%b6","status":"publish","type":"post","link":"https:\/\/takuyakobayashi.jp\/blog\/2023\/12\/21\/9170","title":{"rendered":"iOS Safari\u3067YTPlayer\u306e\u81ea\u52d5\u518d\u751f\u304c\u52b9\u304b\u306a\u3044\u4ef6"},"content":{"rendered":"\n<p>\u300cjquery.mb.YTPlayer\u300d\u3067\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306b\u57cb\u3081\u8fbc\u3093\u3060<strong>YouTube\u80cc\u666f\u52d5\u753b\u306f\u3001iOS\u306eSafari\u3067\u81ea\u52d5\u518d\u751f\u3055\u308c\u307e\u305b\u3093\u3002<\/strong><\/p>\n\n\n\n<p>\u306a\u305c\u306a\u3089\u3001\u30e2\u30d0\u30a4\u30eb\u74b0\u5883\u306e<strong>Safari\u3067\u306f\u30e1\u30c7\u30a3\u30a2\u306e\u81ea\u52d5\u518d\u751f\u304c\u8a31\u53ef\u3055\u308c\u3066\u3044\u306a\u3044<\/strong>\u306e\u3067\u3059\u3002<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u300c\u8b66\u544a: \u30e6\u30fc\u30b6\u30fc\u304c\u8cbb\u7528\u8ca0\u62c5\u3059\u308b\u643a\u5e2f\u96fb\u8a71\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u7d4c\u7531\u3067\u8981\u6c42\u3057\u3066\u3044\u306a\u3044\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3092\u9632\u6b62\u3059\u308b\u305f\u3081\u306b\u3001iOS \u306e Safari \u3067\u306f\u7d44\u307f\u8fbc\u307f\u30e1\u30c7\u30a3\u30a2\u3092\u81ea\u52d5\u518d\u751f\u3067\u304d\u307e\u305b\u3093\u3002\u5fc5\u305a\u30e6\u30fc\u30b6\u30fc\u304c\u81ea\u5206\u3067\u518d\u751f\u3057\u307e\u3059\u3002\u300d<\/p>\n<cite><a href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ja#Mobile_considerations\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ja#Mobile_considerations<\/a><\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">\u9593\u306b\u5408\u308f\u305b\u306e\u89e3\u6c7a\u65b9\u6cd5\uff1aYTPlayer\u3067\u306f\u306a\u304fIframe API\u3092\u4f7f\u3046<\/h2>\n\n\n\n<p><strong>YTPlayer\u306f\u4f7f\u7528\u305b\u305a\u3001<a href=\"https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ja\">Iframe API<\/a>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/strong><\/p>\n\n\n\n<p>autoplay\u304c\u52b9\u304b\u306a\u3044\u306e\u3067\u3001events\u306e<strong>onReady\u30fbonStateChange\u306e\u6642\u306b\u518d\u751f\u3092\u5b9f\u884c<\/strong>\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const tag = document.createElement('script')\ntag.src = \"https:\/\/www.youtube.com\/iframe_api\"\nconst firstScriptTag = document.getElementsByTagName('script')&#91;0]\nfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag)\nlet player\n window.onYouTubeIframeAPIReady = function () {\n   YT.ready(function () {\n      player = new YT.Player('player', {\n      videoId: '\u52d5\u753bID',\n      playerVars: {\n        'playsinline': 1,\n        'showYTLogo': false,\n        'showControls': false,\n        'showAnnotations': false,\n        'controls': 0,\n        'rel': 0,\n       },\n      events: {\n      onReady: onPlayerReady,\n      onStateChange: onPlayerStateChange\n      }\n    })\n   })\n}\nfunction onPlayerReady (event) {\n  $('body').addClass('yt-loaded');\/\/\u30ed\u30fc\u30c9\u5b8c\u4e86\u6642\u306bbody\u306b\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u308b\n  event.target.mute()\n  event.target.playVideo()\n}\nfunction onPlayerStateChange (event) {\n  if (event.data === YT.PlayerState.ENDED) {\n    event.target.playVideo()\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u6700\u521d\u306bYouTube\u518d\u751f\u30dc\u30bf\u30f3\u304c\u4e00\u77ac\u3060\u3051\u8868\u793a\u3055\u308c\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u6b21\u306e\u3088\u3046\u306b1\u79d2\u307b\u3069\u5f85\u3063\u3066\u304b\u3089\u30d5\u30a7\u30fc\u30c9\u30a4\u30f3\u3055\u305b\u308b\u3068\u3054\u307e\u304b\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>iframe#player {\n  opacity: 0;\n  transition: .2s;\n  transition-delay: 1s;\n}\n.yt-loaded iframe#player {\n  opacity: 1;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u305d\u3082\u305d\u3082YouTube\u3092\u80cc\u666f\u52d5\u753b\u306b\u3059\u308b\u3053\u3068\u306f\u9069\u5207\u3067\u306f\u306a\u3044<\/h2>\n\n\n\n<p>YouTube\u3068\u3044\u3046\u30b5\u30fc\u30d3\u30b9\u306f\u52d5\u753b\u5171\u6709\u306b\u3088\u3063\u3066\u30e6\u30fc\u30b6\u30fc\u3092\u96c6\u3081\u3001\u52d5\u753b\u5e83\u544a\u3092\u6d41\u3059\u4e8b\u306b\u3088\u3063\u3066\u53ce\u76ca\u3092\u5f97\u3066\u3044\u308b\u4f1a\u793e\u3067\u3059\u3002<br>\u305d\u306e\u305f\u3081\u3001YouTube\u3092\u30b5\u30a4\u30c8\u57cb\u3081\u8fbc\u307f\u306e\u305f\u3081\u306e\u30b9\u30c8\u30ec\u30fc\u30b8\u3068\u3057\u3066\u5229\u7528\u3059\u308b\u65b9\u6cd5\u306f\u9069\u5207\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p>YouTube\u306f\u5ea6\u3005\u4ed5\u69d8\u5909\u66f4\u3092\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u57cb\u3081\u8fbc\u307f\u52d5\u753b\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30a4\u30b9\u306e\u5f62\u72b6\u304c\u5909\u308f\u3063\u305f\u308a\u3001\u3082\u3057\u7121\u95a2\u4fc2\u306a\u5e83\u544a\u304c\u5dee\u3057\u8fbc\u307e\u308c\u308b\u3088\u3046\u306a\u3053\u3068\u304c\u3042\u308c\u3070\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306e\u30d6\u30e9\u30f3\u30c9\u304c\u8105\u304b\u3055\u308c\u308b\u4e8b\u614b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u6700\u8fd1\u306f\u30cd\u30c3\u30c8\u30ef\u30fc\u30af\u901f\u5ea6\u304c\u683c\u6bb5\u306b\u5411\u4e0a\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u7121\u96e3\u306bmp4\u52d5\u753b\u3092\u57cb\u3081\u8fbc\u3093\u3060\u65b9\u304c\u3044\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;video src=\"images\/video.mp4\" poster=\"images\/video-thumb.jpg\" autoplay loop playsinline muted&gt;&lt;\/video&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u300cjquery.mb.YTPlayer\u300d\u3067\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306b\u57cb\u3081\u8fbc\u3093\u3060YouTube\u80cc\u666f\u52d5\u753b\u306f\u3001iOS\u306eSafari\u3067\u81ea\u52d5\u518d\u751f\u3055\u308c\u307e\u305b\u3093\u3002 \u306a\u305c\u306a\u3089\u3001\u30e2\u30d0\u30a4\u30eb\u74b0\u5883\u306eSafari\u3067\u306f\u30e1\u30c7\u30a3\u30a2\u306e\u81ea\u52d5\u518d\u751f\u304c\u8a31\u53ef\u3055\u308c\u3066\u3044\u306a\u3044\u306e\u3067\u3059\u3002 &hellip; <a href=\"https:\/\/takuyakobayashi.jp\/blog\/2023\/12\/21\/9170\" class=\"more-link\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">iOS Safari\u3067YTPlayer\u306e\u81ea\u52d5\u518d\u751f\u304c\u52b9\u304b\u306a\u3044\u4ef6<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-9170","post","type-post","status-publish","format-standard","hentry","category-tips"],"_links":{"self":[{"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/posts\/9170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/comments?post=9170"}],"version-history":[{"count":0,"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/posts\/9170\/revisions"}],"wp:attachment":[{"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/media?parent=9170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/categories?post=9170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/takuyakobayashi.jp\/blog\/wp-json\/wp\/v2\/tags?post=9170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}