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 iframe
in 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.- Embed YouTube videos faster
- The cover image background of a YouTube video can appear as a thumbnail image, if the position is the first image of a post.
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=0
function 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