Brightcove - Add responsiveness on load (set player size to match the wrapper)

Send Snippet To: Save this snippet to Code Collector Pro -- view all mihai2u's snippets
language: Other
license: Other

Code for Snippet:

                
/* fitVids handles half of the problem as it works consistently with the flash-based player, the API is only needed when using the SmartAPI in HTML5 view */
 
/* Need the following params added in the brightcove embed code:
<param name="includeAPI" value="true" /> // required
<param name="templateLoadHandler" value="onTemplateLoad" /> // required
<param name="templateReadyHandler" value="onTemplateReady" /> // not required, but can prove useful in some occasions
*/
 
onTemplateReady = function(evt) {
 
	videoId = evt.target.experience.id; /* we can not access the object element on mobile devices, so need to take it from here */
	$video = $('#' + videoId);
 
	if ( $video.parents('.wrapperx').length ) { // we don't necessarily need to confirm the location of the video, it was easier in the approach I took as I didn't need all the videos to become responsive
		videoWidth = $('.wrapperx .video-wrap-touch').width(); // one common wrapper for these videos, we can simply take the width of the parent element on a per-video basis for more extensibility
		videoHeight = videoWidth * 0.56; // computed according to the default 16:9 video sizes
		evt.target.setSize(videoWidth, videoHeight); // API call
	}
 
}
 
comments powered by Disqus

Info

Link to this snippet:


Download to Code Collector

To use the direct link to your snippet on CodeCollector.net either copy the html from the above section or drag the Download to Code Collector to where you would like to use it.

More Info:

Times Viewed: 1360
Date Added: 2013-12-04 18:25:24
Last Modified: 2014-06-10 06:59:33

Web Analytics