Use Flash/HTML5 Background on SilverStripe Site

It is very easy to use Flash or HTML5 in the background of your SilverStripe site! For example: http://www.e-sstonia.ee/slam/

Requirements:

Video files in: flv, mp4, ogv if don’t have them use converter online: http://video.online-convert.com/

JW Player

  1. Code for Themes/yourtheme/templates/Page.ss:
    <div id="container">
    here add other divs like menu and so on.
    <div class="content">
    $Layout
    </div>
    </div>
    <div id="bgt">
    <video id="bg">
    <% Control Siteconfig %>
    <source src="$Ogv.URL" type="video/ogg">
    <source src="$Webm.URL" type="video/webm">
    <source src="$Mp4.URL" type="video/mp4">
    <% end_control %>
    </video> 
    </div>
    <script type='text/javascript'>
      jwplayer('bg').setup({
        'file': '$Mp4.URL',
        'width': '100%',
        'height': '100%',
    		'controlbar': 'none',
    		'repeat': 'always',
    		'shuffle': 'true',
    		'icons': 'true',
    		'mute': 'false',
    		'wmode': 'transparent',
        'stretching': 'exactfit',
    		'autostart': 'true',
    		'modes': [
            {type: 'flash', src: 'themes/yourtheme/js/player.swf'},
    				{type: 'html5'}
        ]
      });
    </script>
  2. Make CustomSiteConfig.php under the Mysite/code/ using code:
    <?php
    class CustomSiteConfig extends DataObjectDecorator {
    
       function extraStatics() { 
          return array( 
             'db' => array( 
                'Ogv' => 'File',
                'Mp4' => 'File',
                'Webm' => 'File'
             ) 
          ); 
       }
    public function updateCMSFields(FieldSet &$fields) {
        $fields->addFieldToTab("Root.Main", new FileIFrameField( 'Ogv', 'Ogv File' ));
        $fields->addFieldToTab("Root.Main", new FileIFrameField( 'Mp4', 'Mp4 File' ));
        $fields->addFieldToTab("Root.Main", new FileIFrameField( 'Webm', 'Webm File' ));
       }
    }
  3. Use CSS in your Layout.css:
    #bgt{position:absolute; left:0; top:0; z-index:-1;width:100%; height:100%;}
    #container {position:absolute; width:100%; height:100%; z-index:2;}
    #container .content{width:820px; color:#fff; margin:0 auto;margin-top:150px;-webkit-border-radius: 10px;
    border-radius: 10px; background: rgba(0, 0, 0, 0.6);padding: 50px;text-align:center;
    }
  4. Add CustomSiteConfig to your _config.php
    DataObject::add_extension('SiteConfig', 'CustomSiteConfig');
  5. Build your Database using yoursitename.com/dev/build?flush=1
  6. Add videos under the siteconfig in cms and you’re done.

Looking for quality SilverStripe Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

2 Comments on Use Flash/HTML5 Background on SilverStripe Site

  1. Gemma Deery says:

    Hi Teet
    Thanks for the code. Will this work on SilverStripe 2.3.7
    All the best
    Gemma

Leave a Reply

Your email address will not be published. Required fields are marked *


4 × = 36

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>