Youtube Iframe Chrome Stopped Working

[DuckSportsFan]

After years and years (maybe a decade now)… We’ve used Themeco Pro and never had the Youtube video embed code fail in Chrome. It currently works in Safari & Firefox… But Chrome issues errors in the Console, but maybe not related, see below.

“DevTools failed to load source map: Could not load content for https://estateplanningmap.com/wp-content/themes/pro/cornerstone/assets/dist/js/site/cs-head.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE”

Not sure this is the cause…but I suspect it’s a CSS position issue as I can use Inspector to fiddle with the CSS and the video static image will appear…at least somewhere on the page…usually not in the original designated iframe area. The video iframe is on the home page, just above the large, blue, “Schedule a Free Consultation” button.

https://estateplanningmap.com

Code

<div class="video_container"><iframe style="background:#FFF;" src="https://www.youtube.com/embed/gtSYgAgVv2U?rel=0&showinfo=0&modestbranding=1&enablejsapi=1&autoplay=0&cc_load_policy=0&iv_load_policy=3&loop=0&playsinline=1&autohide=1&theme=dark&color=red&wmode=opaque&controls=2" width="560" height="315" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>

-Paul

[tristup]

Hi Paul,

Thanks for reaching out.
I have checked the same code in my local environment by adding it into the Raw Content and Video element and it worked perfectly fine. I have checked your website and found that you are using a much older version of Pro i.e. 2.1.6, I would suggest you update the Pro its latest version i.e. 5.1.4, and check if that resolves your issue.

NOTE: The Pro has been updated a lot, I would suggest you please copy your live site to a staging server to update the Pro in staging and if everything goes fine, migrate it to the live server to avoid breaking the live site.

Hope it helps.
Thanks

[DuckSportsFan]

Thanks for the feedback! I’ll need to update PHP as I’m still running 5.6+ on account of Mysql depreciated statements. Yet another reason to update my PHP SQL code. -Paul

[ruenel]

Hey Paul,

The missing files in Chrome are the Source Maps. They are requested by developer tools when possible, but won’t interfere with anything. You can ignore those errors.

Basically it’s a way to map a combined/minified file back to an unbuilt state. When you build for production, along with minifying and combining your JavaScript files, you generate a source map which holds information about your original files. When you query a certain line and column number in your generated JavaScript you can do a lookup in the source map which returns the original location.

Please check out these links:

An Introduction to Source Maps [Article] | Treehouse Blog

The iframe is displayed on my end.

I noticed that you are using an optimizing plugin. I am not sure which one. You will have to clear all your plugin caches and regenerate the minified theme resources. I also noticed that you are using an outdated version of the theme (Pro theme 2.1.6 ). You will have to update to the latest version which is version 5.1.4.

Best Regards.