search

googleads / videojs-ima

IMA SDK Plugin for Video.js
Apache License 2.0
450 stars 284 forks source link

Could not load styles and fonts. #915

Closed NareshMurthy closed 4 years ago

NareshMurthy commented 4 years ago

I have used the videojs imports as mentioned in the codepen example.

<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/video.js/dist/video-js.min.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/node_modules/videojs-contrib-ads/dist/videojs.ads.css" />
<link rel="stylesheet" href="//googleads.github.io/videojs-ima/dist/videojs.ima.css" />

I am able to get the page working on my localhost, but when I deploy my page on to a server, I get the below error on Chrome.

Refused to load the font 'data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABDkAAsAAAAAG6gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3hY21hcAAAAYQAAADaAAADPv749/pnbHlmAAACYAAAC3AAABHQZg6OcWhlYWQAAA3QAAAAKwAAADYZw251aGhlYQAADfwAAAAdAAAAJA+RCLFobXR4AAAOHAAAABMAAACM744AAGxvY2EAAA4wAAAASAAAAEhF6kqubWF4cAAADngAAAAfAAAAIAE0AIFuYW1lAAAOmAAAASUAAAIK1cf1oHBvc3QAAA/AAAABJAAAAdPExYuNeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGS7wTiBgZWBgaWQ5RkDA8MvCM0...2DDXbYkhKc+V0Bqs5Zt9JM1HQGBRTm/EezTmZNKtpcAMs9Yu6AK9caF76zoLWIWcfMGOSkVduvSWechqZsz040Ib2PY3urxBJTzriT95lipz+TN1fmAAAAeJxtkMl2wjAMRfOAhABlKm2h80C3+ajgCKKDY6cegP59TYBzukAL+z1Zsq8ctaJTTKPrsUQLbXQQI0EXKXroY4AbDDHCGBNMcYsZ7nCPB8yxwCOe8IwXvOIN7/jAJ76wxHfUqWX+OzgumWAjJMV17i0Ndlr6irLKO+qftdT7i6y4uFSUvCknay+lFYZIZaQcmfH/xIFdYn98bqhra1aKTM/6lWMnyaYirx1rFUQZFBkb2zJUtoXeJCeg0WnLtHeSFc3OtrnozNwqi0TkSpBMDB1nSde5oJXW23hTS2/T0LilglXX7dmFVxLnq5U0vYATHFk3zX3BOisoQHNDFDeZnqKDy9hRNawN7Vh727hFzcJ5c8TILrKZfH7tIPxAFP0BpLeJPA==' because it violates the following Content Security Policy directive: "font-src 'self' *".

video.min.js:27 Refused to create a worker from 'blob:http://www.mydomain.com/4d3c22d8-c22c-41f8-acaa-8007539c773a' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' 'self' *". Note that 'worker-src' was not explicitly set, so 'script-src' is used as a fallback.

I guess due to the above errors all the buttons in the player are square shaped. Could you guys help?

Kiro705 commented 4 years ago

Hellow @NareshMurthy ,

I would recommend using the following tags:

<link rel="stylesheet" href="//vjs.zencdn.net/6.7/video-js.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/6.6.4/videojs-contrib-ads.css" />
<link rel="stylesheet" href="/path/to/hosted/videojs.ima.css">

Note: it will require you to host the videojs.ima.css file. This file is included in the node module, so if this is hosted you can import it from there.

NareshMurthy commented 4 years ago

Cool, i'll try with these tags. Thanks @Kiro705