-2

What is required so that a Youtube video will play on a website page? I have a website and on one page the Youtube video plays fine but on another page the same video does not play.

On the page that works when I hover over the play button it turns from black to red.

On the page the doesn't work the play button doesn't change its appearance when I hover over it.

When I press play on the page that doesn't work nothing happens.

My website is built using Coldfusion

Scott Stroz
  • 7,510
  • 2
  • 21
  • 25
westcoastbc
  • 17
  • 1
  • 1
    StackOverflow's purpose is to provide answers for specific questions related to code. We can't help you if we don't know what your web page is trying to load. Please compare the embed codes from both pages. If you can't tell what's wrong, post those here for help. – TRose Jun 13 '19 at 22:13
  • 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 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 – westcoastbc Jun 13 '19 at 22:15
  • [That message is just a warning, i.e. debug hint.](https://stackoverflow.com/questions/41218507/violation-long-running-javascript-task-took-xx-ms) Did you double-check the embed code you are using on your website? Does using a different video fix the issue? – Alex Jun 13 '19 at 23:31

1 Answers1

0

Can anyone explain why the following solved my problem.

On the page that didn't work the code that was used to display the Youtube video 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>

On the page that did work the .... code was not surrounded by the 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);
}

If I removed: 

bottom: 0;

then the Youtube video loaded fine and played.

Can anyone please explain why this fixed my problem

westcoastbc
  • 17
  • 1