What is required to play a youtube video on a website

On the page that doesn't work I see in the console that I am getting the following error:

[Violation] 'setTimeout' handler took 77ms   www-embed-player.js:378
[Violation] 'setTimeout' handler took 142ms  www-embed-player.js:378

Is this the error and what is causing this. My youtube vidoes work fine on other pages on my site. Unfortunately the page that doesn't work requires a login to view it so I cannot post the link to the page

Best stick with iframes...

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

Select allOpen in new window

As object + embed are both deprecated.

No way to guess about your pages, unless your pages can be accessed for testing.

Just to many variables to guess.

Note: Almost always the problem with all pages relates to broken HTML (syntax errors).

https://validator.w3.org/nu/ is your friend.

First fix all errors + warnings. Many times pages magically begin working... when HTML syntax errors are all fixed...

The youtube video is using an iFrame. The code that loads displays the youtube video is:

<p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true">
<iframe width="640" height="360" src="https://www.youtube.com/embed/ztr-AS-xkDQ?wmode=opaque" frameborder="0" allowfullscreen="" class="fr-draggable"></iframe>

</span></p>

Select allOpen in new window

Hum... I personally wouldn't deploy a site generating this code because your URL encoding is broken.

?wmode=opaque?wmode=transparent?wmode=transparent?wmode=transparent?wmode=transparent?wmode=transparent?wmode=transparent?wmode=transparent?wmode=transparent?wmode=transparent

Select allOpen in new window

Well... is mangled... First, get rid of the duplications. Second, use valid URL encoding as in...

1) You can only have a query parameter named once, as using wmode repeatedly, either only the first or last occurrence will be used, so only way anyone could have a prayer of understanding how this might work is to look at your Webserver config, regards how query parameters are processed.

?wmode=opaque

or

?wmode=transparent

2) Even if you understand the order of processing, any slight change may switch the order, so only use wmode=... once...

3) If you must pass multiple query parameters, use correct encoding syntax, to ensure any + all parameters are processed, so something like...

?wmode=opaque&name1=val1&name2=val2

Select allOpen in new window

So use "&" as a separator not many "?" characters, as behavior will depend on your current Webserver config.

I have modified the code to be:

<p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true">
<iframe width="640" height="360" src="https://www.youtube.com/embed/ztr-AS-xkDQ?wmode=transparent" frameborder="0" allowfullscreen="" class="fr-draggable"></iframe>
</span></p>

Select allOpen in new window

and I am still getting the timeout error for www-embed-player

If you visit https://www.youtube.com/embed/ztr-AS-xkDQ all works well, so likely it's something else related to your site.

Provide a clickable link to your site + likely someone can suggest a fix.

My challenge is that this is only a problem on a page that is restricted. You have to be a registered user to view the page so I can't provide a clickable link. If I add the same youtube video on another page it works fine.

You said, "If I add the same youtube video on another page it works fine."

You've answered your own question.

Something on the page seems to be interferring with video playback.

If page is restricted, then fastest solution may be to hire someone to assist you.

To do this work yourself...

1) Follow the step above - use https://validator.w3.org/nu/ to clear up any syntax errors.

2) Then start stripping out Javascript code (likely culprit), one by one, till you find the culprit.

3) Once you've identified the culprit, determine best fix approach.

Very simple. Just a bit time consuming.

Can anyone explain why the following solved my problem.

On the page that didn't work the code that was used to display the video youtube is the following:

<p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true">
<iframe width="640" height="360" src="https://www.youtube.com/embed/ztr-AS-xkDQ?wmode=transparent" frameborder="0" allowfullscreen="" class="fr-draggable"></iframe>
</span></p>

Select allOpen in new window

On the page that did work the <iframe ...> .... </iframe> code was not surrounded by the <span> with class fr-video.

I found in one of the style sheets it contained the following which was only used on the page that didn't work:

.fr-element .fr-video::after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  display: block;
  background: rgba(0, 0, 0, 0);
}

Select allOpen in new window

If I removed:  
bottom: 0;

then the Youtube video loaded fine and played.

Can anyone please explain why this fixed my problem

No way to guess without access to actual page.