iframe内の要素を取得したい

Question

###前提・実現したいこと
youtubeの埋め込み動画のvideo要素を取得したいです。調べたらjQueryを使わない場合はcontentWindow.documentを使うらしいのですがうまくいきません。どうしたらいいでしょうか。
###該当のソースコード

const a = 'https://www.youtube.com/embed/';
const YouTube = `iframe[src^="${a}"]`;
const iframe = document.querySelector(YouTube).contentWindow.document;

Answer 1

不可能です。

.contentWindow.documentを取得できるのは、同一オリジンである場合だけです。
例：http://example.com/index.html のページ内にある <iframe src="http://example.com/iframe.html"></iframe> にアクセスする

別のドメインの<iframe>内のDOM要素にはアクセス出来ないようになっています。
MDN 同一オリジンポリシー

---

なぜこのようになっているかとと、情報の不正取得を防ぐためです。
例えば、Facebookのコメント欄を<iframe>で埋め込むと、閲覧者は自分のFacebook上での名前（本名など）が分かりますよね。
これをページ作成者側がJavaScriptで操作して本名を取得できてしまったら、大変です。

---

そもそも、なぜYouTubeの埋め込み動画のvideo要素を取得したいのですか？
それが分かれば適切な回答ができるかもしれません。

Comments

[nekojiro]

WebExtensionsでアドオンを作っていてそこで動画を停止させる処理をしたいからです。

[kura]

なるほどです。でしたらJavaScript APIを使うといいです。
[Qiita 【JS】YouTubeのiframe埋め込み動画をJSでコントロール](http://qiita.com/konweb/items/ab414d75ecddfb0cf4e9)
document.querySelector(YouTube).contentWindow.postMessage('{"event":"command","func":"pauseVideo"}', '*'); など。

srcに"?enablejsapi=1"がないと実行されないので、ページ表示時などにiframeのsrcを置換すると良いと思います。