Aug 1, 2014

Embed A Youtube Video With Effects On Your Blogger Blog Post

Sometimes you may have to embed YouTube videos to your post. Now let’s see how we are going to do that. In this part of lesson, we are going to focus on,
  • How to embed a YouTube video on your post?
  • How to center your YouTube video?
  • How to change the height and the width of your YouTube video?
  • How to add and customize a border for your YouTube video?
  • How to add a shadow box to your YouTube video?

 

How to embed a YouTube video on your post?

 

First go to the YouTube and select the video you would like to add to your post. Click on “Share” button below the video.
YouTube menu

Next go to “Embed” section. Copy the code and come back to your Blogger blog post editor. You can also adjust the size of the video.
embed section of the menu

Then select HTML and paste the code where you want to embed your video in the HTML side of the blog post editor. Then go to compose side where now you can see your video responsible for the corresponding HTML code.
post editor HTML side


The below video will help you to understand the process easily. (The video is kind of old, it shows the older blogger interface, but the process is still the same).


But you cannot stop here by just adding a YouTube video to your post. You will also need to do some modifications and add various effects to your video to make it much more beautiful. Now we are going learn about those simple tricks that make your video more beautiful.

They are,
  • How to center your YouTube video?
  • How to change the height and the width of your YouTube video?
  • How to add and customize a border for your YouTube video?
  • How to add a shadow box to your YouTube video?

Okay, let’s look at them one by one. Before that I want to mention one thing. In the following section we are going to work with HTML codes very briefly. I am sure even without any knowledge of HTML, you can follow what I am saying easily. But it is always better to have some kind of knowledge about HTML. So kindly go through this article we wrote on HTML to get some kind of knowledge about HTML which will be helpful for you in next few lectures.

And also when you have to work with colors you will have to refer to HTML color codes to know how you can manipulate your HTML code to get the color of your desire.

Further more for the sake of easiness to work with HTML codes we have created a Live HTML Editor which exactly functions as the HTML side and the compose side of the blog post editor. You can paste your code in the top window and see the result in the bottom window very easily. You also can use this to customize your HTML codes before pasting it directly on the HTML side of the blog post editor. Alright then hereafter let’s train all example codes in the upcoming lessons in our Live HTML Editor.


Alright to where we left.

How To Center Your YouTube Video?

 

Sometimes, once you preview your post after embedding the YouTube video you will find that it is out of the borders of the post layout or it may have aligned to the left side of your post, even with adjusting size of the video before. In that case you will need to center your video so that it will be right within the borders. For that we need to do some adjustments to the code you pasted on the HTML side.

Let’s see how we can do this.

First paste the embed code we copied from You Tube in the top window of the LIVE HTML Editor. This is your original code and we are going to do modifications to this code to get what we desire.

<iframe allowfullscreen="" frameborder="0" src="//www.youtube.com/embed/PkVbF9DmtSw" height="360" width="640"></iframe>
Copy the code from here
You can see that your video is not centered yet. Now you can center your video by simply adding HTML center tag to your embed code as below. See we have warped the iframe with the center tag. All you have to do is just type “” at the same positions. Now our video is centered.

<center> <iframe allowfullscreen="" frameborder="0" height="360" width="640" src="//www.youtube.com/embed/PkVbF9DmtSw"></iframe> </center>
Copy the code from here
Now how does it look like? It is at the center of the window right?

How To Change The Height And The Width Of Your YouTube Video?

 

You can also change the height and the width of your YouTube video as you wish. First paste the original embed code we copied from You Tube in the top window of the LIVE HTML Editor.

<center><iframe allowfullscreen="" frameborder="0" height="360" width="640" src="//www.youtube.com/embed/PkVbF9DmtSw"></iframe></center>
Copy the code from here
Simple adjustment you should do here is that the changing of the two numbers 360 and 640 into whatever the number you wish. But make sure that it makes sense :).

Sample code:
<center><iframe allowfullscreen="" frameborder="0" height="180" width="320" src="//www.youtube.com/embed/TwQPsWDKdIA?feature=player_detailpage></iframe></center>

Now can you see that your video has become smaller?

This is how the above video looks like after we have centered it and changed its height into 180 and width into 320 using the HTML code.


How To Add And Customize A Border For Your YouTube Video?

 

We can have a border around our video by adding a simple inline CSS style inside the iframe open tag code. This is how it is done.

First paste the code in the top window of the Live HTML Editor. (Here we used the code from the above example)

<center> <iframe allowfullscreen="" frameborder="0" height="180" width="320" src="//www.youtube.com/embed/PkVbF9DmtSw" ></iframe> </center>
Copy the code from here
Now modify the code as below using an inline CSS style inside the iframe open tag code.

<center><iframe style="border:3px solid red;" allowfullscreen="" frameborder="0" height="180" width="320" src="//www.youtube.com/embed/PkVbF9DmtSw"></iframe></center>
Copy the code from here
Now you can see your video with a red solid border in the bottom window?

The yellow color highlighted code we included inside the iframe open tag is known as the style attribute. Let’s have a closer look at it.

CSS style attribute


There we can change the parameters given in red as we wish.

Well let’s see how our border will look like after changing the three parameters in the style attribute.

  • Change the border width by adjusting 3px into whatever number you prefer. ( eg: 5px, 10px, 6px )
  • You can change the current border style by replacing solid with dotted, dashed, double, groove, ridge, inset or outset.
  • Color of your border is changed by placing your preferred HTML color code instead of red.

Sample border codes
Your YouTube video

Code:


Your YouTube video

Code:


How To Add A Shadow Box To Your YouTube Video?

 

We can create a shadow box effect by adding another property to our style attribute. Here let’s see how we can insert our shadow property into the style attribute.

First paste the code in the top window of the LIVE HTML editor.

<center> <iframe allowfullscreen="" frameborder="0" height="180" width="320" src="//www.youtube.com/embed/PkVbF9DmtSw" ></iframe> </center>
Copy the code from here
Now modify the code as below using a style attribute.

<center> <iframe style="box-shadow: 10px 10px 5px #000000;" allowfullscreen="" frameborder="0" height="180" width="320" src="//www.youtube.com/embed/PkVbF9DmtSw" ></iframe> </center>
Copy the code from here
Can you see the shadow effect around your video?
Now let’s have a closer look at the style attribute.


  1. property.
  2. The horizontal (x-axis) offset of the shadow ( eg: 8px, -8px, 10px, -12px ).
  3. The vertical (y-axis) offset of the shadow  ( eg: 8px, -8px, 10px, -13px ).
  4. The blur radius ( adjust the blurriness of your shadow ).
  5. color of your shadow.
Change the numbers and colors to see how your shadow changes accordingly.
You can even combine the both effects. Here is an example after implementing all the above codes so far we learned from this lesson.

<center><iframe style= " box-shadow: 10px 10px 5px #999999 ; border: 10px outset #666666 ;" allowfullscreen="" frameborder="0" height="180" width="320" src="//www.youtube.com/embed/PkVbF9DmtSw"></iframe></center>
Copy the code from here
Here is the live preview when we paste the code in the HTML side.



Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)