How to Install YouTube Responsive Videos on a Blog

The use of video properties in a blog article has become more widespread since YouTube launched the embed video feature. This feature allows us to display YouTube videos directly on our blog / website. The problem is the display of YouTube videos is not responsive even though the blog template that we use is responsive. For that we need to add some code so that YouTube videos become responsive on the blog. 

On this occasion I will explain two ways to install YouTube videos on a blog, as well as how to get YouTube video embed codes with Android phones, along with information regarding embed YouTube videos on the blog. 

The direct way
is to install the YouTube video embed code inside tag iframe. Despite usagetag iframein the post it is said to be less good in terms of SEO, according to SEO checker sites. However, this method has several advantages, including the following.

1. Embed YouTube videos faster
2. The cover image background of a YouTube video can appear as a thumbnail image, if the position is the first image of a post.

Installation

To create a responsive YouTube video on the blog, place the CSS code below right above the code ]]></b:skin>or </style>in your blog template. Or it could be in a post in HTML mode with a wrap tag style.

.embedded-video-large{background-color:#000;background-position:center;background-size:cover;cursor:pointer;display:inline-block; width: 400px; height: 230px; max-width:100%;overflow:hidden;position:relative}


.videoyoutube{text-align:center;margin:20px auto;width:80%;}


.video-responsive{position:relative;padding-bottom:56.25%;overflow:hidden;margin:8px}


.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}


@media screen and (max-width:400px){


.videoyoutube{width:100%}


}

How to install YouTube videos on blog posts

To install YouTube videos, use the code format below to call / display YouTube videos on the blog. Place the code in HTML mode, when you make an article / post.

<div class="videoyoutube">
<div class="video-responsive">
<iframe allowfullscreen="1" class="embedded-video-large" src="https://www.youtube.com/embed/KODE_ID_VIDEO?rel=0"></iframe>
</div>
</div>

Change the text KODE_ID_VIDEO with the YouTube video id code that you want to embed to display on the blog. 

Information:

• Its allowfullscreen="1"function code is to bring up the full screen / full screen button.
• The rel=0function code so that at the end of the video is not displayed related videos, usually there are 50 related videos and if clicked it will be played directly on YouTube, not on your blog.

Examples of responsive Youtube videos

How do you make YouTube videos look like they are on tv (make a monitor effect)? 

Add the css code below to the CSS set above.

.videoyoutube{background:linear-gradient(to bottom,#303030 0%,#202020);border:1px solid #404040;border-bottom:1px solid #303030;border-radius:5px;box-shadow:1px 30px 30px -26px #000000}

Using JavaScript

The javascript function here is to change the code in any tag that uses the specified class, to be tag iframe. So actually this is just to outsmart or just to avoid using tag iframeit directly in the post. Let me be more SEO "he said". However, this method also has several weaknesses, including the following. 

1. The resulting background image cannot appear as a thumbnail image. The reason is "still a mystery" ???
2. Loading vidoe content is longer because generally javascript is placed in the bottom body tag "loaded later".

Installation

Place the following CSS code above the code ]]></b:skin>or </style>. 

.videoyoutube{text-align:center;margin:20px auto;width:400px; max-width:80%;}


.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px}


.video-responsive iframe{position:absolute;top:0;left:0;width:400px;height:230px;max-width:100%; max-height:100%;border:0}


@media screen and (max-width:400px) {


.videoyoutube{max-width:100%}


}

Install the following javascript code above the code </body>.

<script type='text/javascript'>


//<![CDATA[


setTimeout(function(){$('.video-youtube').each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="1"></iframe>')})},5000);


//]]>


</script>

Make sure in your template there is any version of the jquery code. If you don't have one, please install the following jquery code above the code </body>. 

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

How to display YouTube videos on a blog

To call / show embed YouTube videos on blog articles, you can simply use the following code in HTML mode when creating articles / posts. 

<div class = "videoyoutube">
<div class = "video-responsive">
<div class = "video-youtube loader" data-src = "// www.youtube.com/embed/ KODE_ID_VIDEO ? rel = 0">
</ div>
</ div>
</ div>

Change the text KODE_ID_VIDEO with the YouTube video id code that you want to embed to display on the blog. 

Note: for code descriptions, and how to create monitor effects, you can use the same CSS code as in the first method above. 

How to get the YouTube video embed code via an Android phone

From some tutorials on how to make responsive YouTube videos, most of them use desktops as a media to get YouTube video embed codes. So when I practiced the tutorial, I found a problem because the device available was only an Android cellphone. But that doesn't hinder my intention, because I'm sure there must be an alternative way to achieve a goal, if we want to try. Here's how to get the embed code for a YouTube video.

1. Open the YouTube application on your Android phone / smartphone.
2. Look for the video that you want to take the embed code.
3. After meeting, click the three point button on the right side of the video.
4. Select / click Share , then on the new window pop-up click Copy link.
5. Paste / paste the url in the draft post, browser tab, or wherever you can. sample YouTube video url: https://youtu.be/ qLrWHuOQPOQ
6. Copy the last code from the url, usually a combination of upper and lower case letters. That is KOE_ID_VIDEO which you can use to install the embed YouTube video, in the format as described above.