How To Install Youtube Videos On Blogger


There are 2 ways how to embed a video on a blog page, as follows:

Sumber youtube

1. Install video with IFrame code. To install youtube video on blog using standard way that has been frequently used, this way basically use special script but use iframe code which we can set width and height measure, code below is IFrame code for embed a video on a blog.

<iframe width=’600’ height=’480’ src=”></iFrame>

To make it simple enough in the blog editor, please switch to HTML mode and copy the code above right where the video will be displayed, then replace VIDEO_ID with the video id that will be displayed. Unfortunately the code above has many weaknesses, it is because the above video using iframe , so in addition to poorly seo video installed will not be responsive and can cause the increase in the size of the blog page, of course less good because the greater the capacity of the page then it can affect the page loading blog becomes heavier.

2. Installing Video without IFrame (Recommended) The second alternative is a highly recommended alternative for you to use, this way using HTML code without IFrame being manipulated with javascript and css code. For each video added simply use the code as below:

<div class=”youtube-player” data-id=”VIDEO_ID”></div>

If the video you want to install on the blog page more than one code can be added more than one according to the video you want to install.

How to install a video without an iframe is as follows:

a. Log into your blog, then in the left side menu bar select the menu tempate> edit HTML

b. Find the code </ head then copy the script below before the head code, or find the code </ html then place the code below on it

<script> document.addEventListener(“DOMContentLoaded”,function(){var div, n, v =document.getElementsByClassName(“youtube-player”); for(n =0; n < v.length; n++){ div = document.createElement(“div”); div.setAttribute(“data-id”, v[n]; div.innerHTML = videoThumb(v[n];             div.onclick = videoIframe;             v[n].appendChild(div);}});function videoThumb(id){var thumb ='<img src=””>’,  play ='<div class=”play”></div>’;return thumb.replace(“ID”, id)+ play;}function videoIframe(){var iframe = document.createElement(“iframe”);var embed =”″;       iframe.setAttribute(“src”, embed.replace(“ID”,;     iframe.setAttribute(“frameborder”,”0″); iframe.setAttribute(“allowfullscreen”,”1″);this.parentNode.replaceChild(iframe,this);}</script>

c. Put also above the code

</ head css script below:

<style>.youtube-player {     position: relative;padding-bottom:56.23%;/* Use 75% for 4:3 videos */      height:0;   overflow: hidden;max-width:100%; background:#000;    margin:5px;}.youtube-player iframe{ position: absolute;     top:0; left:0;width:100%;height:100%;       z-index:100; background: transparent;}.youtube-player img {bottom:0;  display: block;       left:0; margin:auto;max-width:100%;      width:100%;position: absolute;       right:0;  top:0;  border: none;     height:auto; cursor: pointer;-webkit-transition:.4s all;-moz-transition:.4s all; transition:.4s all;}.youtube-player img:hover {-webkit-filter: brightness(75%);}.youtube-player .play {    height:72px;       width:72px;  left:50%; top:50%;      margin-left:-36px;margin-top:-36px;position: absolute;       background: url(“//”)no-repeat;   cursor: pointer;} </style>

d. Save your blog template.

f. If you want to embed the video on your blog page, then in the post editor, go into html mode, then put the code below, in the section about which video you want to put:

<div class=”youtube-player” data-id=”VIDEO_ID”></div>

VIDEO_ID can be replaced with the video_id you want to display.

The way above makes the page that contains lighter video content because the video being advertised is just the video thumbnail, the process of downloading a new video runs if the visitor is watching the video.


Please enter your comment!
Please enter your name here