CreateBetterWebsites.com

This article is not about embedding video from youtube or vimeo or some other site.

It’s about adding your own videos to your website. And adding video to your site can be tricky these days. Especially when people are using mobile devices.

You must add video to your website that is compatible with mobile devices otherwise you lose a great majority of potential visitors.

So first thing you need is a video that you’ve taken or you have rights to publish on your website. Then you need to convert the video format to prepare it for your website and mobile devices. The best way to make your videos compatible is to convert them to mp4.

Mp4 is compatible on mobile devices. There are many software you can purchase or even download for free which can be used to convert your video.

Moyea video converter is a free converter you can download and use. ffmpeg is another free tool you can use as well.Once you have converted your video to mp4 you will need to upload it to your website.

The next thing you’ll need is a player to play your video on your website. Two of the most popular and most widely used are jwplayer and flowplayer.

The video example below uses a licensed version of the jwplayer.

Once you have your player files and your video uploaded to your website you can use the following code on your web page to add your video.

<script type='text/javascript' src='http://www.yourwebsite.com/jwplayer.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    'flashplayer': 'player.swf',
    'file': 'http://www.yourwebsite.com/videos/yourvideo.mp4',
    'controlbar': 'bottom',
    'width': '470',
    'height': '320'
  });
</script>

And that’s all you need to do. Both jwplayer and flowplayer have example code and setup wizards as well if you get stuck with embedding the code on your website.

If you are using wordpress then the code above may not work. WordPress is tricky when it comes to adding javascript on a post or page, so the best way is to use plugins for the players instead of the code above.

WordPress has plugins you can use for both flowplayer and also for jwplayer. There are short codes you can add to your post once you’ve activated and installed the plugins.

Adding rounded corners with borders and shadows has gotten easier than ever with CSS.
You can add them to images or just about anything.

A box with rounded corners and some color can be a great way to spice up a pages Look and Feel on any site. Checkout the samples below.

The CSS code:

#roundedbox {
padding: 5px;
width: 310px;
background-color:#d9d9d9;
border-width:1px;
border-style:solid;
border-color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

The HTML Code:

<div id=”roundedbox”>
This is a box with rounded borders. Enter any text you like to highlight or add emphasis to something on your pages.
</div>

Now we can take the same box and add a different background color and some shadow effect to it as well. The shadow really brings out the box and makes it standout on the page.

The CSS code for rounded box with Shadows:

#roundedbox-shadow {
padding: 5px;
background-color: #C7E9F9;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
border-width:1px;
border-style:solid;
border-color:#000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

The HTML code for the rounded box with shadow effect:

<div id=”roundedbox-shadow”>
This is a box with rounded borders. Enter any text you like to highlight or add emphasis to something on your pages.
</div>

We can add the same effect to images as well. See the examples below.

If you monetize your website with adsense, chances are you sometimes see ads that are just not as relevant as you would like.   Here is a little known secret to get better targeted adsense ads on your site.

Wrap your content area with the following commented HTML code.  This is a legitimate and suggested code by Google.

<!– google_ad_section_start –>

<!– google_ad_section_end –>

I like to add <!– google_ad_section_start –> right above my heading and then end it where my content ends. This way you leave out all the ads and navigation and extras in side columns and footers.

Are you wasting your time adding meta tags to your web pages?  Do search engines care? Matt Cutts of Google says don’t waist even a minute on your meta keyword tags. 

See the video below of Matt Cutts answering a question from a webmaster of Meta Keywords tags. So in other words the meta keywords tag is just a waste of time.

Meta description tags May be useful though. The description may be used in the organic search engine results if it’s relevant to the content of the page. If it’s not relevant it won’t be used.

So spending a little time adding a good description to your meta description tag can pay off if it’s used in the search results.  And if it’s a great description it may help with getting more targeted visitors into your site.