YouTube API change affecting background video player

YouTube has made a recent change in their API (Application Programming Interface) which is causing issues for the video player on most Shopify themes. An example is the Background video section, only the cover image is shown and the actual video is not evoked. 

We have released a new version of Broadcast, version 1.6 which uses the changed code in the API. You can download the latest version of Broadcast:

Details on how to download the latest version of Broadcast


We also have an manual code fix that you can apply to your theme without the need to update. If you are familiar with manual code changes, below are the steps needed:

Manual fix for YouTube Video Player:

1

Make a duplicate of your theme 

Note: Do not skip this step. 

Example - Live published theme:

OR

For draft unpublished themes, use the actions link for that theme:

Choose duplicate:

2

Open the Code Editor

Only proceed if you have made a duplicate of your theme. 

From the theme editor (customize theme) click "Theme actions" and then "Edit code" to get to the theme editor.

3

Open the Javascript file

On the left side, from the Assets folder, open theme.js:

Be sure the file you open is theme.js and not theme.liquid or theme.scss.liquid. 

4

Use find and modify

In the code area (right-side), use Command-F (Mac) or Control-F (Windows) to find the following:

event.target.a

There will be 3 instances:

Carefully replace only:

event.target.a

With:

event.target.getIframe()

Example after:

Verify that the code changes are exact as above before saving your theme. 

After verifying, use the Save button


Disclaimer:
Modify the code at your own risk. Invisible Themes will not provide any warranty or support for code changes. Please work with a developer or Shopify Expert to ensure proper customization. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.


Reference from Google about API change:

https://developers.google.com/youtube/iframe_api_reference

Still need help? Contact Us Contact Us