Hello, friends. Today I will be writing a post on how to add responsive youtube videos and also Twitter tweets to blogger posts
. At some point in blogging, we may come to an extent where adding some videos to our blog, seem necessary and professional. So I will be showing us how to add static YouTube videos to Blogspot blogs and also make them responsive (Fit into any screen size)
Following the popular demand of a few of my blogger friends, including Paul Divine
who blog’s at WorldStar99
I have decided to hold on with the Chrome Inspect Tool series
for a while and quickly offer a few more posts including how to add CSS to blogger blogs.
How To Add Responsive YouTube Video
being one of the largest video hosting sites,
one would love to make good use of it by uploading his own videos or just embedding someone else’s video. The beauty of YouTube is it lets you easily add videos to another platform, by either sharing or embedding but here on this tutorial
we will focus on ‘Embedding.’
Visit youtube.com and select any video you wish to add to your blog post. As for me, I have selected ‘Darey – Pray For Me ft. Soweto Gospel Choir [Official Video]’ since it’s one of my favorite songs.
Scroll down a bit on the page, until you find
Add to >> share. Once you find them, clink on Share for more options.
You should now see a new layout with Share, Embed, and Email,
with share buttons
and video URL below. Clink on the Embed message in the list and wait for a new layout of codes below it.
The code is an HTML code which will appear highlighted (blue). Now just copy the code and head to your blog post, or you can also paste it into a notepad.
Go to blogger dashboard and create a new post. On the left where you have Labels, Schedule, Permalink and others, simply clink on Options. Watch out for the below menu with “Reader comments, Compose Mode and Line Breaks.”
On the compose mode, select ‘Interpret typed HTML’ and clink on done at the bottom. This will allow your YouTube Video to show within the post.
Now paste the code we earlier copied from YouTube and paste it anywhere in the blog post. It should look similar to the picture below. And make the following modifications to make it responsive.
Make YouTube Videos Responsive
Generally, YouTube provides you with static video widget that is set to ‘560px’ now if you do not make it responsive, it will appear too small on laptop devices, and appear too big on a mobile device.
In other to make YouTube Videos flexible, we need to change the assigned 560px and change it to 100%. Just as the code below has been modified by me, only replace the ‘560’ on your copy code from YouTube and replace it with 100%.
Now preview your blog, and you should watch a responsive video that fits well into any device.
Adding Twitter tweets to a blogger blog
is quite easy and professional. Visitors feel more comfortable to believe what you post if you provide a tweet referring to it. Assuming your post is about a man claiming the tree with his head, people would love to see a tweet or Instagram post that points to it.
Visit your Twitter page and locate any post you wish to embed on your blog post. Once found, continue with the following modification
Below the tweet, you should find 4 buttons (Reply, Retweet, Like, and More). The more option is with the 3 dots so simply clink on it.
A menu will come up at the bottom with more options (Share via direct message, Copy link to a tweet, etc) on that same list, you should find an option with “Embed Tweet.”
Once found clink on it.
After clicking, a new box should pop up, with some codes and an option to “Include Media” at the bottom. If you wish to show the only post without photos, link or videos untick the option but if you want the video and pictures to show, leave the option ticked.
A preview of how the post will look will also be shown at the bottom of the code. So just copy the highlighted code and paste it into a notepad.
Create a post in your blog and locate the Post Settings, among the list check out for Options once found clink on it for more menus. In the next menu, you will see with an option to ‘Show HTML literally’ and ‘Interpret typed HTML.’ Only tick the Interpret typed HTML option.