Please don't click on these links yet.

Under construction: ? * # 0-9 |A |B |C |D |E |F |G |H |I |J |K |L |M |N |O |P |Q |R |S |T |U |V |W |X |Y |Z

Your opinion is needed with a new "FAQ" I'm thinking of writing up. Click on this "FAQ link" now and leave a comment if you can spare the time.
Tutorials : How I made it •toolbars • paginations • buttons • widgets • tweeks • mega tweeks • everything else • inspiration • ideas • FAQ • problems • Fixing problems

How to align videos to centre in the sidebars

Monday, January 21, 2013  at 4:57 PM
When you first start adding content to your template you will find that videos, in particular, may not be displayed centrally in the widget. Or, if you already have videos on your blog, they may be thrown to the left within the widget. So, you might want to realign the videos so they are centered in the middle of the widget. This is one of the easiest things to do actually. All you do is add the <center> and </center> tags into the videos widget itself.

A typical embedded video code will look like this:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>

For two or more videos I add the <p> and </p> closing tag between each video, to give a line space between each video, like so:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>
<p>
</p>
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/xzRTQ8Yaipw" frameborder="0" allowfullscreen></iframe>

Once you have added all the videos you want in the videos widget, you simply add the <center> tag at the very beginning of all the video code, and </center> at the very end of all the video code. The end result will look like this:

<center><iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/O0hh1kSb2RE" frameborder="0" allowfullscreen></iframe>
<p>
</p>
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="167" height="154" src="http://www.youtube.com/embed/xzRTQ8Yaipw" frameborder="0" allowfullscreen></iframe></center>

If you don't want to get confused you can place the <center> and </center> tags on new lines by themselves. By doing so it does not affect the other code any differently, and the end result will still be exactly the same as if you put them on the same lines as the video code itself.

This usually works for centrally aligning most other widgets too. You can add the <center> and </center> tags to things like feedjit widgets, embedded images, clocks, and to some search bars, for example. Give it a try and see what works and what doesn't.
Posted by Shirley E Hardy
Labels:
Share  Tweet this post

0 comments:

Comment Rules/Features ▼
Your Answer Thanks for contributing an answer to Blogger Tutorials for everyone! Please make sure your answer is NOT a SPAM comment, as such comments will be deleted. Provide details and share your research. Avoid statements based solely on opinion; only make statements you can back up with an appropriate reference, or personal experiences. Comment Options to add to the form below:
Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.


Features:

To change your text to bold simply type in a left facing arrow then a UPPERCASE letter b then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /B and then a right facing arrow.

To change your text to italics simply type in a left facing arrow then a lowercase letter i then a right facing arrow. Then add your text, followed by typing in a left facing arrow, then type in /i and then a right facing arrow.

To change the colour of your text type in [co="red"]Add your text here[/co] You can change the colour of the text by either typing in the colour's word or by adding a hex colour code that includes the hash symbol.

Your text goes here. To add a marquee text type in [ma]Add your text here[/ma]

To add an image or gif type in [im]Add your image or gif URL here[/im]

Of course, you can add various combinations of the above to your comment as long as you place the ending tags in the right locations.

To add a Youtube video as a comment use either one of the two codes below and replace the video url with the one you want to add as a comment.
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-WATCH-PAGE-ON-YOUTUBE-HERE]
[video=ADD-ENTIRE-VIDEO-URL-THAT-YOU-VIEW-ON-THE-watch?feature=player_detailpage-HERE]

Subscribe to: Post Comments (Atom)

Scrollbox codes

<a target='_blank' title='DON'T TOUCH MY PHONE' href='ADDYOURURLHERE'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7STOhgP_MlwszrcyPkDHVQ2MbrK0IqnhEWeqUdmPh5QFbqdXvlGmh-RN3ZVfPR48rBipZUVKAGy1mlpuL1Q1EoHubFlNPI25TJ54PvPhZSqHuM42AYIuIhtbSg-F40KHKgW08aL29bar/s320/58298-dont-touch-my-phone.png' border='0'/></a>

This free script provided by
JavaScript Kit

FAQ

YOUR OPINION COUNTS! A list of topics that I am thinking of writing about but need feedback from visitors before I go ahead with it.
Click to view more Pages
 

Blogger Tutorials for everyone

This site consists of tutorials that you would not normally see elsewhere. I am adding tutorials that I have either tweeked or created myself, using existing code already found on the Internet.
Back To Top Image by Cool Text: Logo and Button Generator - Create Your Own Logo

Scroll to Bottom Back to Top