Shopify theme blocking youtube iframe within Bootstrap

Solved
Tourist
10 0 1

I've installed bootstrap on a default theme because i want to use this youtube carousel on my website.

As you can see, something in the theme is avoiding to load the youtube iframe.

indeed if i create an alternate page with

{% layout none %}

in the header, the carousel works flawlessly.

How can i find out what is blocking the youtube iframe? 

Thank you!


Here is the code for the page and alternate page

 

you can enter the store using the password which is: bootstrap

0 Likes
Highlighted

Success.

Shopify Expert
2686 67 688

That's because theme.js  declares its own onYouTubeIframeAPIReady function:

// Youtube API callback
// eslint-disable-next-line no-unused-vars
function onYouTubeIframeAPIReady() {
  theme.Video.loadVideos();
}

which overwrites yours.

 

if you add a defer="defer"  when referencing your youtube_carousel.js   yours will win and this (probably) would not break the theme code since you're only loading your javascript in page template? Worth trying anyway.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Tourist
10 0 1

Thank you! May i ask how you found that out?

0 Likes
Highlighted
Tourist
10 0 1

Thank you! May i ask how you found that out?

0 Likes
Highlighted
Shopify Expert
2686 67 688

Actually, I knew how youtube player works, that it checks for callback functions and themes which support videos defined this callback function.

 

However, you could debug your javascript in developer tools by putting breakpoint in the callback function and find out that it is never called; if it's not called, then it's either not available  to caller code (say, defined inside the function scope, which is not the case) or overwritten by other code, which is more likely given that it works fine with {% layout none %}.

 

Finally, you can see function definition (and where it's defined) if you type its name in console and click the code shown to find where exactly this overwriting happens.

 

Hope it helps!

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like