When embedding Youtube videos on a Blog how do i get them to show side by side, say in two columns ?


#1

Firstly thank you for allowing me to join your community.

How do I get YouTube videos to show side by side instead of one under each other. What I am wanting to do is have the videos show in two columns ? Please advise in simple step by step as I am a novice to blogger

Thanks in advance

Regards Terminator


#2

First of all, you need to add some specific div id’s.

Add the following code where you want your videos to appear.

 <div id="wrapper"> 
  <div id="home1">
   First Video Code
  </div>
  <div id="home2">
   Second Video Code
  </div> 
</div>

Replace “First Video Code” and “Second Video Code” with the video codes of your first and second video respectively.

Now add the following css before ]] </b:skin> tag

#wrapper { 
    width: 100%; 
    height: auto; 
    margin: 0 auto;
} 
#home1 { 
    width: 47.5%; 
    height: 300px; 
    float: left; 
    margin-right: 5%;
} 

#home2 { 
    width: 47.5%; 
    height: 300px; 
    float: left; 
}

.clear{
    clear: both;
}

@media (max-width:767px) {
    #wrapper{
        width: 100%;
        height: auto;
    }
    #home1 {
        width: 100%;
        height: auto;
        float: none;
    }
    #home2 {
        width: 100%;
        height: auto;
        float: none;
    }
} 

I Hope it helps.