Skip to main content
R
rosebudd10027515
Inspiring
April 14, 2017
Answered

Animate Canvas element "blocking" Youtube API player controls

  • April 14, 2017
  • 2 replies
  • 2544 views

In my extensively modified Animate CC published HTML document (CSS) I wanted my Youtube served video (which does load faster than the canvas animation) to be "revealed" after my animation. I have successfully gotten it to load under (z-index and a transparent "window" in document background color settings).

As you can probably imagine the canvas element, is blocking the Youtube API player controls. Remembering back to the SWF days and wmode settings prevventing SWFs from covering up things like drop down menus, I am hoping there is a trick to solve this issue. I do have very good reasons for preferring the Youtube API player (no Rich Media fees)

* {
  margin: 0;
  padding: 0;
  }
  body {
  overflow-x: hidden;
  }
  #wrapper{
  position: relative;
  width: 320px;
  height:480px;
  }
  #player {
  position: absolute;
  top:283px;
  left:9px;
  width: 300px;
  height:174px;
  z-index: -1;
  }
  #click {
      position: absolute;
   top:0;
   left:0;
   width:320px; height:280px;
    z-index: 20;  
   
   }
  .canvas {
      position: relative;
   top:0;
   left:0;
   width:320px; height:480px;
    z-index: 10;
     
   }
This topic has been closed for replies.
Correct answer ClayUUID

I am no javascript guru. Are you saying a framescript on the Animate timeline can tell a hidden Youtube player to show itself when a certain frame is reached?


I'm not a JavaScript guru either. You just need to be aware of certain things:

  • JavaScript can change CSS styles.
  • The scripting language in Animate Canvas documents is JavaScript.
  • Therefore Animate can change CSS styles.

In your case, for the player style you'd get rid of the z-index and add this:

visibility: hidden;

Then in Animate, on the frame where you want to reveal the player, you'd add this line of code:

document.getElementById("player").style.visibility = "visible";

2 replies

R
rosebudd10027515Author
Inspiring
April 14, 2017

From my Wayback archive Flashresize.js. I had a SWF that occupied space that overlapped content that appeared to expand on rollover. Except for the part where it blocked links in Safari

function setFlashWidth(divid, newW){

  document.getElementById(divid).style.width = newW+"px";

}

function setFlashHeight(divid, newH){

  document.getElementById(divid).style.height = newH+"px";

}

function setFlashSize(divid, newW, newH){

  setFlashWidth(divid, newW);

  setFlashHeight(divid, newH);

}

function canResizeFlash(){

  var ua = navigator.userAgent.toLowerCase();

  var opera = ua.indexOf("opera");

  if( document.getElementById ){

  if(opera == -1) return true;

  else if(parseInt(ua.substr(opera+6, 1)) >= 7) return true;

  }

  return false;

}

C
ClayUUID
Brainiac
April 14, 2017

So have your YouTube player above the canvas, styled initially hidden, then un-hide it when you want it to show.

R
rosebudd10027515Author
Inspiring
April 14, 2017

Thanks, Clay. My ideal situation is not to have an Animate CC  timeline with a guesstimate interval showing a hidden element, as that is two trains on separate tracks with neither train knowing how fast the other is going.

C
ClayUUIDCorrect answer
Brainiac
April 17, 2017

I am no javascript guru. Are you saying a framescript on the Animate timeline can tell a hidden Youtube player to show itself when a certain frame is reached?


I'm not a JavaScript guru either. You just need to be aware of certain things:

  • JavaScript can change CSS styles.
  • The scripting language in Animate Canvas documents is JavaScript.
  • Therefore Animate can change CSS styles.

In your case, for the player style you'd get rid of the z-index and add this:

visibility: hidden;

Then in Animate, on the frame where you want to reveal the player, you'd add this line of code:

document.getElementById("player").style.visibility = "visible";

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices