How To Make Videos Responsive with CSS

How To Make Videos Responsive with CSS

A responsive website means It will respond to your browser sizes or I can browser stretches. The basic idea of it is to give optimal viewing experience to visitors, nowadays you will rarely see a unresponsive website. If you remember a Jquery snippet I posted about detecting browser real time size It is also responsive. So basically in order to make websites responsive on load you need a meta tag that helps you to stretch/resize the elements of your website but It's not required for this tutorial.

So for this tutorial, only videos with iframe, embed or objects works. You can get the iframe code of any videos from popular websites like YouTube, DailyMotion, Vimeo, MetaCafe etc.

Let's make our style, here's the css we need(if you are a beginner make sure you put the codes within <style>) :

 .Responsive-Video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow:
    hidden;
}
   
.Responsive-Video iframe, .Responsive-Video object, .Responsive-Video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


So after adding the css to your web page, add your video embed code within the div class given below(I know this is NOOB! )  :

<div class="Responsive-Video">

    </div>


Example :

<div class="Responsive-Video">
    <iframe width="760" height="720" src="http://www.youtube.com/embed/Mu4ARzSZOmg" frameborder="0" allowfullscreen></iframe>
    </div>


Screenshot : 

YouTube Responsive Video

If you're using Blogger or Wordpress you can just add the css code within the body and whenever you post a video in your post you can add the embed code within the div class.

Things You should Remember when Redesigning Your Website

Redesigning a Website

Things change. Businesses change, directions change, audiences, trends and attitudes change. As the face of your business or service, your website is the window through which your clients experience you, and as such, if it doesn’t adequately reflect what you or your clients are after, then you’re out of the loop. This is true if you’re looking to design your fledgling website, or if you’re looking to update and re-haul your existing site. The list of tips below should help website owners – new and old – know what to look for when giving their online presence a facelift.

Purpose
First, what’s the purpose of your website? Why is it out there in the first place? Find the essentials, and convey them in a clear mission statement. If your website is clogged with meandering information and distracting tangential stuff, there’s no way your clients will be able to easily figure out where you want them to go. If your purpose isn’t easily noticeable, it’s assumable that you don’t know your own purpose. And if it’s overused, it seems weak and unconvincing. But with clearly designed, easily navigable website design that brings out your purpose clearly, simply and concisely, you’ll be onto a winner. In combination with consistent, well chosen color themes and font choices, your site will present purposeful content and clearly understood images.

Audience
Know who your target audience is, and speak to them on the same level. Don’t dilute your site with self-promotional flattery – write from the point of view of your audience. Why should they take the time to devote their attention to you? What’s in it for them? And to make it a lot easier, don’t saturate your writing with overly technical, ridiculously complex jargon and babble. Speak simply.

Know your competition
Take the time to do your research; look around at your competitors’ websites, and take notes on what you like and don’t like. Explore their sites as if you were a potential client, and your pointers will direct you well.

Copywriting and SEO
Copy is super important, and so is choosing the right kind of writing for your site. As mentioned before, you ought to view all the copy on your website as an invaluable resource to state your mission and ideology. However, there’s a fine balance between over- and under-saturated, and you should be careful with how to work it into your website. Search Engine Organization (SEO) is also important – good SEO will keep you high up on related searches and increase your traffic, and it’s important to stay updated.

Read the Fine Print
There are virtually hundreds of web hosting packages on the internet that you can possibly selectF from. However, make sure that you scrutinize the fine print because there might be some limitations that might surprise you especially when it comes to data transfers, bandwidth usage and other purported unlimited features that comes with your web hosting services.

Plan ahead - web hosting packages
Build your website with growth in mind – you want it to grow, right? You should add in enough space for extra pages to be added later. And to make your site constantly fresh and relevant, schedule maintenance and content. This will make launching new promotional or marketing campaigns that much more easy.

Website design really is a deal breaker – take the time to do it right.