JW Player wrapper
To display a story video, create a wrapping div element to contain the JWPlayer element. Assign several of the story video classes to this div.
The jwplayer class is required. A class describing the width of the div is also required and 3 options are
available: fluid, size-320x340, size-380x214.
The shadow class may be added for an optional drop shadow. The optional alignment classes of
left and right may also be added. 3 examples are provided below.
Fluid with Shadow
To include a fluid width video with drop shadow, add jwplayer fluid shadow classnames to the
div code block below.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat, illum fugiat culpa iste est
sapiente omnis, eligendi ipsa repellendus ducimus vitae ex illo, nesciunt enim fuga perspiciatis. Facere?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab suscipit rem ad aspernatur, accusantium culpa
laboriosam dolorem doloribus sunt officia non mollitia.
<![CDATA[<div class="jwplayer fluid shadow">
<div id='player'></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat...]]>
320 x 240 Video (4:3)
To include a 320 x 240 video without drop shadow, aligned right, add jwplayer size-320x240 right classnames
to the div code block below.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat, illum fugiat culpa iste est
sapiente omnis, eligendi ipsa repellendus ducimus vitae ex illo, nesciunt enim fuga perspiciatis. Facere? Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Ab suscipit rem ad aspernatur, accusantium culpa laboriosam
dolorem doloribus sunt officia non mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo at
accusantium harum quia dolore architecto ducimus rem porro minus perferendis, ab eveniet aliquid maiores sint
necessitatibus odit facilis facere repellat.
<![CDATA[<div class="jwplayer size-320x240 right">
<div id='player'></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat...]]>
380 x 214 Video (16:9)
To include a 380 x 214 video with drop shadow, aligned left, add jwplayer size-380x214 left shadow classnames
to the div code block below.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora placeat, illum fugiat culpa iste est
sapiente omnis, eligendi ipsa repellendus ducimus vitae ex illo, nesciunt enim fuga perspiciatis. Facere? Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Ab suscipit rem ad aspernatur, accusantium culpa laboriosam
dolorem doloribus sunt officia non mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo at
accusantium harum quia dolore architecto ducimus rem porro minus perferendis, ab eveniet aliquid maiores sint
necessitatibus odit facilis facere repellat.
<![CDATA[<div class="jwplayer size-380x214 left shadow">
<div id='player'></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit placeat...]]>
JW Player Configuration
Once you have added the the jwplayer div element to your body content, you will need
to configure JW Player and include the code at the bottom of your body content.
To configure the player, begin where it says /***Begin Editing Here***. You will
replace the x's with the alphanumeric string that begins your site's cloudfront
url's. The aspect ratio may be either 16:9 or 4:3. The active color may be any acceptable unicode color code. If you
have any questions about this section, feel free to contact the tech team for support.
<![CDATA[<script type="text/javascript" src="https://www.cecentral.com/scripts/jwplayer-7.8.7/jwplayer.js"></script>
<script type="text/javascript">
jwplayer.key="Gy0shpymLKaIBicz64poyh8NC5l51PC9rNXWKYn6RVs=";
/***Begin Editing Here***/
var poster = 'https://xxxxxxxxxxxxx.cloudfront.net/media/001/poster.jpg',
mp4File = 'https://xxxxxxxxxxxxx.cloudfront.net/media/001/video.mp4',
webmFile = 'https://xxxxxxxxxxxxx.cloudfront.net/media/001/video.webm',
aspectRatio = '16:9', // allowed aspect ratios: 16:9|4:3
activeColor = '#8cc63f';
/****End Editing Here***/
document.addEventListener("DOMContentLoaded", function(event) {
jwplayer("player").setup({
playlist: [{
image: poster,
sources: [{
file: mp4File
},{
file: webmFile
}]
}],
skin: {
name: 'seven',
active: activeColor
},
rtmp: {
bufferlength: 3
},
width: '100%',
aspectratio: aspectRatio,
stretching: 'fill'
});
});
</script>]]>