0

I want to manipulate a youtube video to autoplay and loop using js/jquery. It seems my issues stem from the from the fact that my site is on a CMS (Drupal), and it already spits out the iframe. So it's not an empty div that gets replaced as per the documentation.

The first thing I did was to change some settings on my site to ensure that "enablejsapi=1" and an ID was included in the output for whatever spits out the iframe.

I thought that would suffice and I'd only need to reference that ID in the onYouTubeIframeAPIReady(); function. But it wasn't working.

I looked at these solutions as well:

What confuses me is in the second solution, it only works when the js is "inline". In the fiddle it's actually written in the html box in a script tag, but if you move the script in the js box, it doesn't.

Still I do feel like the points stated in the second solution might point me in the right direction, but I'm stuck in how to move forward with it.

  1. onPlayerReady will not fire the ready check on localhost.
  2. Also when linking your youtube.js file it has to come after the iframe.
  3. add ?enablejsapi=1
  4. sometimes double linking in both player_api and iframe_api will also help
  5. //< before www. not https://
  6. placment is key.

Here's what I've tried:

  1. I've addressed #1 by actually adding my js in the server
  2. My script is linked just before the closing body tag (so it is after the iframe)
  3. I have adjusted my cms' youtube handler (Media: Youtube for Drupal) to add this parameter on output
  4. I have tried this but it didn't seem to make a difference
  5. I am limited by this as I am bound to using https. Is this the deal breaker?
  6. I do notice that when I add the standard code to load the the iframe api asynchronously in my js, the <script src="https://www.youtube.com/iframe_api"></script> and <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflC6bXIS/www-widgetapi.js" async=""></script> appears as the first items in <head>, instead of just directly after the iframe as it normally would. I'm unsure why this is happening, but what can I do to ensure it's in the correct place? Perhaps this is the source of the issue, if placement is the key?

What I want to achieve is this behaviour: https://codepen.io/cee-r/pen/PMaRJR, where the video accepts parameters set in js when the html markup is already:

<iframe id="player" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/ApXoWvfEYVU?enablejsapi=1" frameborder="0" allowfullscreen="1" ></iframe>

instead of:

<div id="player"></div>
cr.repo
  • 1
  • Would simply replacing the original iframe with a new one work for you? – Ilmari Karonen Aug 10 '19 at 00:02
  • Anyway, when the browser parses the HTML sent by the server, any (non-async) scripts get executed as soon as the parser sees the – Ilmari Karonen Aug 10 '19 at 00:07
  • Yes, how can I "kill" the original iframe and replace with a new one? I tried using remove(); the iframe and then appending an empty div with appropriate ID but it didn't work. It would remove the iframe but wouldn't replace the div as it should. I'm assuming it's because it's all happening after the fact? As for the scripts, would appending it with jQuery specifically in the container holding the iframe or something work? – cr.repo Aug 10 '19 at 02:51
  • What version of Drupal are you trying to do this with? – shaneonabike Feb 13 '20 at 14:34

0 Answers0