CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionyoutube
DjangoPy
DjangoPy

Reputation: 865

Embedding YouTube video in Chrome extension

I would like to embed a video hosted on YouTube and play it when the user clicks on a button in popup.html.

I was following the solution listed here:

Showing a YouTube video in a Google Chrome extension

A new tab opens but I don't see the video, I only see a gray rectangle with a smiley inside.

I guess Google is blocking the video somehow. Is it possible to show YouTube video on a new tab opened by background.js?

Thanks

EDIT:

  <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="//www.youtube.com/embed/XXXXXX?html5=1" frameborder="0" allowfullscreen></iframe>
  </div>

Upvotes: 1

Views: 3325

Answers (1)

Xan
Xan

Reputation: 77531

You are using a protocol-relative URL:

src="//www.youtube.com/embed/XXXXXX?html5=1"

At the same time, the embedding page has a URL like

chrome-extension://yourextensionidhere/page.html

This results in an src URL

chrome-extension://www.youtube.com/embed/XXXXXX?html5=1

which is obviously invalid and results in a network error (rendered in a subframe as a grey page with a sad face).

To resolve this, change the protocol-relative URL to explicit https://...

Upvotes: 4

Related Questions