Embed YouTube Video in extension pages in Manifest V3

[Jackie Han]

I'm not asking a question, but explaining how to embed YouTube video in your extension pages in MV3 and related issues.

To embed YouTube video (iframe) in your extension page, there are two ways:

1. use an <iframe> tag

2. use official YouTube iframe api

More details see here.

No matter MV2 or MV3, you can embed a youtube video by embedding an <iframe>. This way is no problem. But without the YouTube iframe api, you can't control the video, like play(), pause(), seek(), load another video(without reset iframe.src) ……

YouTube iframe api requires you to load its remote code.

In MV2, you can modify "content_security_policy" in manifest.json to use it.

But in MV3, you can't load remote code, and YouTube iframe api can't work in an extension sandbox either.

In conclusion, you can embed a youtube video, but you can't use the official YouTube iframe api.

Since the official API uses postMessage to communicate between the iframe and your page, an alternative is to emulate its communication protocol to achieve the same functionality like this. Yes, this is a hacky way, because there is no official document for postMessage protocol.

Jackie Han

[scatter shot23]

Useful! Thank you, Jackie. Nice to see educational content on this forum, not just troubleshooting.