Skip to main content
Boston College School of Social Work

video-expands

Boston College Graduate School of Social Work: Where Transformation Happens.
Boston College Graduate School of Social Work: Where Transformation Happens.

NOTE FOR NEXT USE

  • The lightbox effect works better with actual video. When the code was tested with a photo slideshow, the photos each took a second to render crisply.
  • For convenience, try storing image on DAM instead of Flash server
  • Need to add a "Play" arrow to the image holder
  • Javascript Lightbox code is in the Page Properties head code

Original code and presentation can be seen at /content/bc/offices/ides/events/programs/eTeaching_Day/2012.html.

In May 2012, the Instructional Web Producer from BC Instructional Design and eTeaching Services shared the original code and explanation with us:

<a class="video" href="#2012-eTeaching-KEYNOTE" title="2012 eTeaching Day keynote presentation" style="padding: 0 !important; background-image:none !important;"><img src="/content/dam/files/offices/ides/images/2012-eTeachingDay-videos-3-play.jpg" width="500" height="333" alt="2012 eTeaching Day Keynote presentation" /> </a> <br /><div class="video-container"><div id="2012-eTeaching-KEYNOTE"><embed src='http://flash.bc.edu:80/webtech/mediaplayer/player.swf' width="1066" height="620"  bgcolor='black' allowscriptaccess='always' allowfullscreen='true' flashvars='file=ides/ides/2012-eTeaching-keynote-DrMazur.mp4&skin=http://flash.bc.edu/webtech/skins/stylish/stylish.swf&autostart=true&streamer=rtmp://flash.bc.edu:80/bc/' /></div></div>

Explanation:

This creates a clickable link:

<a class="video" href="#2012-eTeaching-KEYNOTE" title="2012 eTeaching Day keynote presentation" style="padding: 0 !important; background-image:none !important;">

This allows me to show an image in place of the video that the user clicks on, in this case, a photo I took on eTeaching Day of Dr. Mazur called "/2012-eTeachingDay-videos-3-play.jpg" that's stored on a server. I call out the dimensions of the image on the page as width="500" height="333":

<img src="/content/dam/files/offices/ides/images/2012-eTeachingDay-videos-3-play.jpg" width="500" height="333" alt="2012 eTeaching Day Keynote presentation" />

This is a "container" for the video that becomes visible once the user clicks on the <a> image </a> and the location of the player on the Flash server:

<div class="video-container"><div id="2012-eTeaching-KEYNOTE"><embed src='http://flash.bc.edu:80/webtech/mediaplayer/player.swf'

Here I called out the bigger size of the video that appears in a Javascript LightBox, the background color to be black before the video plays:

width="1066" height="620"  bgcolor='black' allowscriptaccess='always' allowfullscreen='true'  

This is the location of the video file on the flash server:

'file=ides/ides/2012-eTeaching-keynote-DrMazur.mp4

We applied a style to the javascript LightBox that the video plays in:

&skin=http://flash.bc.edu/webtech/skins/stylish/stylish.swf

and for the video to play automatically when the user clicks on the image:

&autostart=true