``### イントロダクション
ようやく、休みになったのでJSでのGoogle Mapをやります。前は、画像ファイルをアップロードして。。。と考えていましたが、動画の方が良いと判断しました。Thetaも買ったので(笑)

Google Maps + Youtube

色々考えた結果こうなりました、そして早速実装したものの、動画表示できない事件が。。。

ちなみにスマホでは灰色の部分も表示されませんでした。。。

Youtube Player API

調べて見たところ、上のYoutube Player APIで吹き出し部分にYoutubeが埋め込めるようなのです。

余談ですが、こんな方法もいけるようです。が、自分の場合はダメでした。。。
とりあえずはコードを写経して見ます。

しかし、さして変化もなく。。。

やっぱりこれか？

Refused to display 'https://www.youtube.com/watch?v=MwI4m_LLugo&feature=youtu.be' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

このHTMLコードがコンポン的な原因のようです、早い話がYoutubeにアクセスできない状態のため上のHTMLも表示できない。。。という仮説です。
まとめると「iframeでアクセスできるようにすればOK!」というわけです。

戦いの結果

敵将の首を討ち取りました！
原因はiframeに渡しているURLが不適切なツェツなので表示されないということでした。
表示できない時のURL
https://www.youtube.com/watch?v=t-6PiKxDX2E
表示できたURL
https://www.youtube.com/embed/t-6PiKxDX2E
watchとembedで違いがあり、iframeに埋め込むのは「embed」の方を使用するべきだったということでした。
でわでわ。。。