kudos - Brightcove CSS Loader

kudos bcss loader

Welcome to the example page for the kudos Brightcove CSS loader. This utility makes loading Brightcove CSS files into players on the fly a straightforward and easy process.

player example

This is a chromeless example. Check out the standard version, too.

What's going on: On page load, the bcss.js file searches through the source looking for any link tags with a rel value of brightcove-css. When found, the URL in the href attribute is loaded into an iframe. The iframe's content is then captured, parsed, and fed to the Brightcove player API.

Limitations: Because the Brightcove CSS file is being loaded and manipulated via Javascript, it's a requirement that both the page and the CSS being loaded are served from the same domain. For more information on cross-site scripting, please see this.

project links

dynamic load examples

Switch to funky colors

Switch to white

Switch to default

sample stylesheets

default-chromeless.bcss

funky-chromeless.bcss

white-chromeless.bcss

don't forget!

You need to enable the Javascript API for your player in the Brightcove Studio!

using kudos bcss loader

				
<html>

	<head>
	
		<title>But wait, there's more!</title>
	
		<link rel='brightcove-css' href='default.bcss' />
	
		<script src='bcss.js'></script>
		
	</head>
	
	<body>
	
		<!-- The below is default Brightcove Player embed code -->	
		<script language='JavaScript' type='text/javascript' 
			src='http://admin.brightcove.com/js/APIModules_all.js'></script>
		<script language='JavaScript' type='text/javascript' 
			src='http://admin.brightcove.com/js/BrightcoveExperiences.js'></script>
		
		<object id='myExperience27294566001' class='BrightcoveExperience'>

			<param name='bgcolor' value='#FFFFFF' />
			<param name='width' value='486' />
			<param name='height' value='412' />
			<param name='playerID' value='27614856001' />
			<param name='publisherID' value='1785355086'/>
			<param name='isVid' value='true' />
			<param name='@videoPlayer' value='26762004001' />		
		
		</object>
		
	</body>

</html>

loading bcss files on the fly

				
<script>

	bcss.inject("stylesheet.bcss");

</script>