How to embed Youtube videos side by side in one row on WordPress?

Posted on 09/24/2011

1


As you develop your online presence with WordPress, the above question must surface sooner or later. You may want to present multiple vidoes important for the viewer of your website in one row, side by side.  However, a default WordPress YOUTUBE SHORTCODE,

[ youtube=VIDEO-URL-HERE&w=WIDTH-NUMBER-HERE ]  (without spaces inside brackets)

is frequently insufficient. It produces a wide, large embed. If you want to present many videos in this way, the viewer will have to scroll down indefinitely, which may be irritating. You can prevent this by adding multiple YouTube embeds side by side or embeds with an accompanying text next to them.

Well, but how to do it? You may find many solutions, many of which cannot be implemented without buying upgrades or knowing more about coding. However, while helping a friend of mine with his website, I found a great page with WordPress tips that elegantly solves the problem. Below, I am sharing the solution found here and here.

It is easy. You must write the following code in the WordPress TEXT editor (not visual editor).

1. Embedding multiple YouTube videos is one row.

This code is helpful:

<div style=”float:left;width:auto;margin-right:14px;”> YOUTUBE-SHORTCODE1-HERE </div>

<div style=”float:left;width:auto;”> YOUTUBE-SHORTCODE2-HERE </div> <div style=”clear:both;height:1em;”></div>

Don’t forget to specify the width of the youtube window when adding shortcode of the video. For example, below I have set width of the video to 280 (w=280) which is nice for my website. You can also adjust margins between the videos. If you do this correctly, it produces an outcome like this:

  2. Embedding YouTube video with a description next to it

The following code is another way to present your YouTube contributions in an attractive way. It allows you to add a description next to a video

<div style=”float:left;margin-right:14px;”> YOUTUBE-SHORTCODE-HERE </div>

After you post an embed in this way, every text you will add in the next line will be located on the side of the video. Like this:

Grzegorz Lewicki, a graduate of philosophy at the London School of Economics and journalist at Polish weekly WPROST uses game theory and computer programming to explain how Christianity emerged while in vehement competition for converts in the ancient Roman Empire.




Useful? Then like it or share it. Cheers.

Advertisement
Tagged: , , , ,
Posted in: Technicalities