Follow Button
Dashboard Button
Back to top

Thursday, June 25, 2015

How to Embed Files and Videos Responsively into Blog or Website?

Today i'll teach you guys how to make your file embed code responsive. In my previous tutorial, i forgot to mention that if you embed your files using the default code provided by google drive, your files will not be responsive. In fact, default embed code from youtube, vimeo, daily motion or even map code from google maps are not responsive. As for now, only instagram, scribd (select 'autosize'), soundcloud, storify and twitter offer responsive embed codes, which means you just need to copy-paste the default embed code provided without changing anything.

What does responsive files/videos means?

Nowadays people used handy electronic devices such as smartphones and tablet more often than a laptop or computers (PC) to browse or even searching for information.Those devices come from a variety of screen sizes. It will be difficult to read something that has an improper aspect ratio (too big or too small). Responsive code play its role by automatically change the file/video width/size to perfectly fit any screen size. This is an important feature for eportfolio as it will encourage good reading and learning experiences. If you read my workshop post using ex: smartphone, you will realize that the embedded powerpoint width and size automatically fit the phone screen (even after you enable auto-rotate option).

Follow simple steps below to make the embed codes responsive:

Step 1. Get the file embed codevideo get the URL

Step 2. Open > Select media source > Paste the code > Click Embed
            (If your embed code from google drive, select Generic iFrame as your media source)

Step 3. Copy the new generated embed code > Paste it into the HTML section of your blog post/page

blogger posts and pages html codes

How to customize?

You can only change the file height, as the code is responsive and it will automatically change the file width according the screen size. To alter the height, change the value of the highlighted code above (padding-bottom: 110%). The best size for pdf/word files = 130/140% and powerpoint = 77%.

Example of default vs responsive file/video:

** View this post using mobile phone/mobile view to see the differences

❖ Using Default Embed Code

❖ Using Responsive Embed Code 
(padding-bottom: 140%)

❖ Using Default YouTube Embed Code


❖ Using Responsive Embed Code

I think that's all for now.. to all my lovely Muslim readers, i wish you guys a blessed Ramadhan. 
May the spirit of this month illuminate the world and show us the way to peace and harmony ♥ 

Smile ^___^


  1. Superb and mind blowing post. Thanks for sharing this post and I had some doubt but now all cleared. Also I am impressed the way you have modified your CSS or javascript for href or anchor tag on mouse hover. The way it is changing color is amaging

    Mohinder Paul Verma
    BloggingFunda - A Community of Bloggers

  2. Excellent work and i appreciate your information about the Dissertation Writing Services UK good work.

  3. Glad to read your informative post, keep sharing valuable information! Looking forward to seeing your notes posted.
    Dissertation Writing Services

  4. I visited your blog for the first time and just been your fan. Quite informative post. I Will be back often to check up on new stuff you post!
    Dissertation Help

  5. Excellent blog and very true. I rarely sell at book events, but do sell at craft shows and farmer’s markets. I stay off author sites like Goodreads, and use Linked In where I connect with non-authors. Same with Twitter. Thanks for your insight, right on.
    buy thesis online
    custom academic writing services

  6. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. Great work iiihost

  7. This is a really good read for me regarding Dissertation Writing, Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informative article. I really like the fresh perceptive you did on the issue. I will be back soon to check up on new posts! Thank you!
    Custom dissertation writing services


Need to add an image/video?
Thank you so much for taking the time to comment this post! ♥