YouTube IFrame API generates mixed content warning

2019-03-24 17:25发布

问题:

When I embed youtube on an HTTPS page using the iframe api in HTML5 mode , it still pulls the actual stream using HTTP, which generates a mixed content warning. Is this usecase properly supported?

I found this discussion from 2011 which suggests it wasn't. However I just tried accessing the CDN server using HTTPS and it works - kind of - but it returns the wrong certificate (google.com instead of something for youtube.com).

Has anyone managed to embed a video on a HTTPS page using the IFRAME API in HTML5 without triggering a mixed content warning (ie. the lock with the yellow warning sign in Chrome)?

Thanks

回答1:

It seems that (as of October 2012) this is the expected behaviour and there are no plans to change it: https://code.google.com/p/gdata-issues/issues/detail?id=2964&can=1&q=youtube%20https&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary



回答2:

You can fix this by configuring your iframe API script to look like this.

Use '//' for the tag src

var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var url = window.location.pathname; 

This will cause the player to load the resources using the same protocol as the page it is embedded on.