• Android
  • Blogger
  • Pendidikan
  • Printer
  • Komputer
  • MedSos
  • Creating a blog post is not as long as text and images, there is also a blog post in the form of a vidio that's Vidio Tutorial, song, or short films. You guys who have a nice blog Tutorial with content of text, pictures and vidio as a complement or nice blog you are a blog share vidio from YouTube The following is a Tutorial how to install Vidio on a blog post with Responsive display.

    Why is it said responsive?

    Unlike the source code of Embet which is generated from generating code like from YouTube which is the default size and can not adjust the screen to display in accessing media devices. So it could be that the vidio display is responsive on desktop browser but not responsive on Android Mobile display. with Tutorial How to install this responsive Vidio we can install the vidio easily, only needed the link source links the Vidio to be published for example from Youtube. Automatically display size Vidio will adjust to the resulution of the screen of the device that access it plus Auto Thumbanil image on the Preview blog post.

    Here's how the Vidio content looks on the desktop and Mobile versions of Dekstop Blog posts

    For how to install it is very easy, you just have to follow the procedure install code that admins share the following:

    First copy the following HTML code place it above ]]></b:template-skin>

    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px;
      height: 0;
      overflow: hidden;
    .video-container iframe, .video-container object, .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

    The placement result as following screen shot

    Then create a new entry (new post) with HTML mode. Paspress the following code on the post that will be in the Vidio add to see the results before publishing you can switch to the Compose method.

    <div class="separator" style="clear: both; text-align: center;">
    <img border="0" height="0" src="https://i2.ytimg.com/vi/--MASUKKAN ID VIDIO DISINI --/maxresdefault.jpg" width="0" />
    <div class="video-container">
    <div style="text-align: center;">
    <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/--MASUKKAN ID VIDIO DISINI --" width="420"></iframe>
    <div style="text-align: center;">
    <br /></div>

    Vidio ID in the first HTML paragraph serves to give auto Thumbnail image on Preview post. While the Vidio ID on the second HTML Pargraph serves as the source of the Vidio will be published. If you don't need a Thumbanail from a published Vidio then just remove the first paragraph of the source code above.

    Sample Source links from Youtube Vidiohttps://youtu.be/CvJbyOeIHgY

    You can get the link by right click on the target of the publication, then select Copy the Vidio URL. For more details, see the following screenshots:

    After that paspress Link results copy of the Vidio URL at the end of the HTML post (if it is done delete link source) or you can put it while in NotePad. Copy the Vidio ID (note the link of the Vidio URL above, the bold red text is the Vidio ID) then pasted on the placement ID of the Vidio Source HTML code (--MASUKKAN ID VIDIO DISINI --).

    When you're finished entering your Vidio ID the next step is as usual to complete the Label, Edit permanent link Link and search Deskpripsi and then publish.

    If you are curious and would like to see the results of the public live responsive Vidio on the blogger post you can visit here: RUMAH TAUSIYAH

    Such a Tutorial how to publish a responsive Auto Thumbanail on Blogger posts, help suport Online Blog Tutorial by means of share a link to social media and see you in the next Tutorial.

    Artikel Terkait:
    Bagi Anda yang ingin mendapatkan notifikasi update setiap harinya silahkan bergabung WhatsApp Group Gabung Sekarang
    Comment Sekarang