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.

How To Hide Internet Explorer Script Errors In VB.NET & C#

internet explorer
I think most of the people hate web browser control script errors in vb.net and c# . if you don't know what i mean , look at the picture below i hope you know it.
Internet error script
Okay i will straightly come to the main point ! you just need to add this line of code in form_load 
   Me.WebBrowser1.ScriptErrorsSuppressed = True
'change WebBrowser1 to your webbrowser name' , here is the code for c#
            this.webBrowser1.ScriptErrorsSuppressed = true;
that's a snippet , thanks.

How To Make A Simple Web Browser In C#

This is my first c# tutorial and its about making a web browser . this web browser doesnt have advanced controls this is just a simple one

lets begin making a simple web browser

1. open your visual c# 2008/2010

2.create a new project and name it whatever you want

3.edit your form properties like text and icon

4. now go to toolbox and grab web browser control inside the form


Visual basic noobs - Basic web browser

This is my first tutorial in the Visual basic noobs series. So lets get this started!

First, open your program for visual basic, it can be visual basic express or visual studio.


After it finishes loading, you should see something like this. (It varies based on what program you have.)