タグ: youtube

開発関連

え、iPad iframe埋め込みだけでインライン音無しYoutube自動再生するん・・・

投稿者作成者: hihihi
投稿日 2020年10月23日
え、iPad iframe埋め込みだけでインライン音無しYoutube自動再生するん・・・へのコメントはまだありません

検証しててびっくりした

前から？いつから？？あいぱっどぅるOS出来てから？

・・・そんだけ。

びっくりして久々に調べたけどよーわからんかった。まぁそういうことなんやろ。
実機検証ダイジネ〜！

その他

【iOS/Android/PC対応】ページを開くと動画を自動再生させる方法を調べてみた | 大石制作ブログ
https://blog.s0014.com/posts/2017-12-05-autoplay/#hl4

スマホ（iOS）でも動画を自動再生させよう！（iFrame Player API、videoタグ対応） | 株式会社エヴォワークス -EVOWORX-
https://www.evoworx.co.jp/blog/video-autoplay/

javascript — iframesとReact.js-YouTubeビデオをアプリに埋め込む方法
https://www.it-swarm-ja.tech/ja/javascript/iframes%E3%81%A8reactjsyoutube%E3%83%93%E3%83%87%E3%82%AA%E3%82%92%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E6%96%B9%E6%B3%95/833557315/

React.js チュートリアル[超入門] #06から#14(最終章)｜山口夏生｜note
https://note.com/natsukingdom/n/n86f89b43b69d

Reactのコンポーネント内でスクロール位置を取得する · PengNote – 勉強した事や行った場所の感想を書くブログ
https://blog.daisukekonishi.com/post/react-listen-scroll/

タグ youtube

js 開発関連

Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらない

投稿者作成者: hihihi
投稿日 2018年11月13日
Youtubeで Failed to execute ‘postMessage’ on ‘DOMWindow’: が止まらないへの2件のコメント

なんじゃこりゃ

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘http://sample.com’).

去年は普通に動いていたはずのサイトで、上記のエラーが出ているので調べた。

結局今の所、１）放置２）気持ち悪いけど対処する、の２択

<script src="https://www.youtube.com/iframe_api"></script>

をサイトに読み込ませればいいが、JavascriptIframeApiでも同じ領域を読み込ませるようにしているので、最終的なソースでは二重に呼び出すこととなり、気持ち悪い。。。というわけで、今の所、放置するか、気持ち悪いけど上記スクリプトを読ませるかの二択。

以下経緯

タグ API連携, youtube, 外部サービス連携

開発関連

去年のiframe版Youtubeプレイヤーがエラーはいてた

投稿者作成者: hihihi
投稿日 2018年10月16日
去年のiframe版Youtubeプレイヤーがエラーはいてたへのコメントはまだありません

昨年度版イベントサイトをそのまま更新で使ってくだサイと言われたやつが今年はエラーはいてたのでメモ

console見たらエラー吐いてた

Failed to execute 'postMessage' on 'DOMWindow'

ぐぐったらすぐありがたい経典が出てきました

Youtube貼り付けでJSエラー – サイコロン

ytPlayerの中のplayerVarsにorigineを付ければ直るらしいので、locationで取り込むよう追記。

originを指定しよう

playerVars: {
"rel": 0,
"autoplay": 0,
"wmode": "opaque",
'origin': location.protocol + '//' + location.hostname + "/"
}

だそうです。
ありがてえ・・・ありがてえ・・・

タグ youtube, 外部サービス連携

youtube cast_sender.js　エラー

投稿者作成者: hihihi
投稿日 2015年1月22日
youtube cast_sender.js　エラーへのコメントはまだありません

youtube 埋め込み iFrame版でなんかChromeのコンソールでエラー出る。
キモい。なにこれ。なにこれ珍百景。
前からだけど。キモい。

javascript – Chrome YouTube cast_sender.js console error – Stack Overflow
http://stackoverflow.com/questions/25814914/chrome-youtube-cast-sender-js-console-error

「エクステンションを入れてる環境のために叩いてるjsのエラーだから別に埋め込みに問題があるんじゃないよ」
ふーん。キモい。

タグ youtube

YouTubeシンプルプレイヤーをjQueryプラグイン化しようとしてはまったpoint

投稿者作成者: hihihi
投稿日 2014年1月7日
YouTubeシンプルプレイヤーをjQueryプラグイン化しようとしてはまったpoint へのコメントはまだありません

なんか動かんな〜と思って調べたのでメモ書き

その１：onYouTubeIframeAPIReadyはプラグインの中に入れてはならない

http://stackoverflow.com/questions/12256382/youtube-iframe-api-not-triggering-onyoutubeiframeapiready

Make sure your onYouTubeIframeAPIReady function is available at the global level

グローバルの領域に置けって書いてます、了解っす。

その２：[player名].playVideo()が動かん

コンソール見たらObject #S has no method ‘playVideo’っていわれる

http://stackoverflow.com/questions/20249948/youtube-api-playvideo-pausevideo-and-stopvideo-not-working

you should utilize the onReady callback parameter of the YT.Player object

YT.Playerオブジェクトが出来る前に呼んでんじゃね？とおっしゃっている。
コンソールで[player名]の中身見ると先に全ての値が帰ってきていたので
そうじゃねーんだけどなーと思いつつ、onReadyで設定するとなおったのでまぁいったん詳しい話はいいですわ。どうもすみませんでした。あざます。

タグ jquery, youtube

iPhoneとかiOSではYoutube iframe APIでの制御に制限が出るよ

投稿者作成者: hihihi
投稿日 2013年10月30日
iPhoneとかiOSではYoutube iframe APIでの制御に制限が出るよへのコメントはまだありません

iOSでのYoutube iframe APIの挙動について、なんか使うメソッドによって動いたり動かなかったりマチマチ。なになにバグなの？と調べたらお優しい方の記事あった。あったよーおかーさーん！！

・iFrame版APIで制御していて
・自動再生・動画の変更をしようとすると
・画面が真っ黒になって動かない場合
「ユーザーが再生させる意思表示して（タップして）ないのに勝手に操作すんなや」ってことらしい。

つまりユーザーがプレイヤーをタップしていない時に起こる。
タップしてないのに制御しようとすると起こる。

なるほど。。そういやそんな話聞いたことあったな（遠い目）
というわけで、IDで動画を差し替える奴も、一回プレイヤーをタップした後だと普通に動いたー。
でも「再生させるにはタップしてね！」とか書けないし。。。むうーん。

■わかりやすい記事。ありがとうございますー
http://pointofviewpoint.air-nifty.com/blog/2013/10/youtube-apiioss.html

タグ youtube

Youtube関連 Links

埋め込みのカスタマイズ
パラメータつけてあげる事で出来るよっと。
■公式
https://developers.google.com/youtube/player_parameters?hl=ja#rel

■小粋空間さん
http://www.koikikukan.com/archives/2012/04/24-015555.php

■その他、詳しい検証記事！！
http://blogs.yahoo.co.jp/sea_story_2/12553942.html

YouTube動画の21のパラメータまとめ+αと埋め込みコードの実例

埋め込みコードをいじるバージョンがiFrame版、AS版（２・３）あり。
またAPIはiFrame verはhtml5前提なりよ。

■iFrame版をAPIで制御する
http://www.crystal-creation.com/web-appli/technical-information/web-api/google/youtube/player-api/iframe.htm

[2013.10.30 追記]
■iOSでは一部のメソッドに制限が出るよ
http://pointofviewpoint.air-nifty.com/blog/2013/10/youtube-apiioss.html

iFrame版をAPIで制御していて、自動再生・動画の変更をしようとすると、画面が真っ黒になる場合、
「ユーザーが再生させる意思表示して（タップして）ないのに勝手に操作すんなや」ってことらしい。

iPhoneとかiOSではYoutube iframe APIでの制御に制限が出るよ

[2013.11.14 追記]
■IE9ではz-indexを無視しやがるよ！
wmode:’transparent’でなおったよ！
http://www.crystal-creation.com/web-appli/technical-information/web-api/google/youtube/player-api/iframe.htm

タグ youtube