CODEWITHSUNDEEP
javascripthtmlyoutube-api
Jakob Handberg Lystbæk
Jakob Handberg Lystbæk

Reputation: 83

Adding HTML attributes to iframe from YouTube Player API

I'm using the YouTube Player API to embed videos on a website:

    let player = new YT.Player(videoElementID, {
      height: '390',
      width: '640',
      videoId: videoElementID,
      host: 'https://www.youtube-nocookie.com',
      playerVars: {
        origin: window.location.host,
        showinfo: 0,
        rel: 0,
        hl: 'da-dk'
      }

but now need to add unsupported attributes to the video iFrame, specifically the attributes data-category-consent and data-consent-src. I also need to set the src as empty:

<iframe width="560" height="315" src="" data-category-consent="cookie_cat_statistic" data-consent-src="https://www.youtube.com/embed/3EeY_7ujsew" frameborder="0" allow="autoplay;"></iframe>

Is there any way to perform these changes to the iFrame prior to the page DOM being read and keep using the YouTube Player API? I need to avoid YouTube-cookies until consent is giving, meaning the iFrame cannot be read until after the attributes have been added.

Upvotes: 0

Views: 1861

Answers (2)

Poojitha
Poojitha

Reputation: 26

We had a similar need. So the data-category-consent and data-consent-src were added through JQuery. Below is the implementation:

<div id="playerId"></div>

<script>
new YT.Player(playerId, {
      height: '390',
      width: '640',
      videoId: videoElementID,
      host: 'https://www.youtube-nocookie.com',
      playerVars: {
        origin: window.location.host,
        showinfo: 0,
        rel: 0,
        hl: 'da-dk'
      }

 
$('iframe#playerId').attr(
{
       "data-category-consent": "cookie_cat_marketing",
       'data-consent-src': $('iframe#playerId').attr("src");
       "src":""
 });

</script>

Upvotes: 1

NVRM
NVRM

Reputation: 13082

Basically don't use a library, create the iframe and populate yourself.

The example won't work here due to:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource

onclick = () => {
  yt.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/3EeY_7ujsew" data-category-consent="cookie_cat_statistic" data-consent-src="https://www.youtube.com/embed/3EeY_7ujsew" frameborder="0" allow="autoplay;"></iframe>`
}
Click to load the player<br>
<div id="yt"></div>

Upvotes: 0

Related Questions