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 embedresponsively.com > 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 ^___^

40 comments:

  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
    http://goo.gl/v45sjV

    ReplyDelete
    Replies
    1. How To Embed Files And Videos Responsively Into Blog Or Website? >>>>> Download Now

      >>>>> Download Full

      How To Embed Files And Videos Responsively Into Blog Or Website? >>>>> Download LINK

      >>>>> Download Now

      How To Embed Files And Videos Responsively Into Blog Or Website? >>>>> Download Full

      >>>>> Download LINK iz

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

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

    ReplyDelete
  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

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

    ReplyDelete
  6. 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

    ReplyDelete
  7. Hello, You have posted such precious and informative article which gave me lot of information. I hope that you will keep it up and we will have more informative and helping news from you. Thanks PhD Thesis Writing Services in India

    ReplyDelete
  8. I agree that a second pair of eyes is absolutely essential to avoid rejections. Through WordsRU.com I was able to get top class editing and proofreading, manuscript critique. They also write excellent author profiles and book synopsis, so pretty much the entire package.
    Proofreading Services For Business
    Research Paper Writing Services
    Children's Book Editing Services
    Children's Book Writing Services
    Scientific Editing Services
    Business Reports Editing
    Technical Editing Services
    Editing Services For BusinessI agree that a second pair of eyes is absolutely essential to avoid rejections. Through WordsRU.com I was able to get top class editing and proofreading, manuscript critique. They also write excellent author profiles and book synopsis, so pretty much the entire package.
    Proofreading Services For Business
    Research Paper Writing Services
    Children's Book Editing Services
    Children's Book Writing Services
    Scientific Editing Services
    Business Reports Editing
    Technical Editing Services
    Editing Services For Business

    ReplyDelete
  9. The post is extremely well written, however a bit editing could have helped. You can seek professional assistance and acquire Assignment Help London enabling a refined editing service needs. The expert and certified professionals offer expert quality assistance along with editing expertise to help students get an error free assignment.

    ReplyDelete
  10. These tips are very useful for new bloggers, and they can grow their online business. They can follow these tips and get huge audience. Every blogger has not enough knowledge about it but now they can get benefits. Dissertation proposal writing services.

    ReplyDelete
  11. Thanks you brother, It is very great full for me. I was trying to find this solution. somehow i found you website on google and read all instruction now it 100% working for my blog http://bodolandlotteryresult.in/

    Thnaks you so much

    ReplyDelete
  12. Thank you for your articles that you have shared with us. Hopefully you can give the article a good benefit to us. Thesis proofreading

    ReplyDelete
  13. Best Merchant Cash Advance Leads Best Merchant Cash Advance Leads are exclusive Leads addressed to you Merchant Cash Advance Leads is the Qualified MCA Leads provider as a firm in the entire globe.

    ReplyDelete
  14. I couldn?t resist commenting. Well written! 온라인카지노
    (mm)

    ReplyDelete
  15. Examine my blog and get those skins at no cost. Enjoy this blog. This is my first time i visit right here. I found such a lot of exciting stuff on your weblog, specially its dialogue. From the tons of feedback to your articles, i bet i am not the only one having all the amusement here! Maintain up the coolest work. I've been that means to write down some thing like this on my website and you've got given me an ideA . thanks for your web site put up. Brown and i are absolutely saving for our new book in this theme and your article has made human beings like us to store our cash. Your ideas definitely responded to all our issues. In reality, above what we had notion of prior to when we came throughout your remarkable blog. My associate and i now not nurture doubts in addition to a thoughts due to the fact you've got virtually attended to the wishes in this newsletter. Thanks excellent items from you, guy. I’ve apprehend your stuff previous to and you’re simply extraordinarily tremendous
    온라인슬롯


    >cc

    ReplyDelete
  16. How Mr Benjamin Lee service grant me a loan!!!

    Hello everyone, I'm Lea Paige Matteo from Zurich Switzerland and want to use this medium to express gratitude to Mr Benjamin service for fulfilling his promise by granting me a loan, I was stuck in a financial situation and needed to refinance and pay my bills as well as start up a Business. I tried seeking for loans from various loan firms both private and corporate organisations but never succeeded and most banks declined my credit request. But as God would have it, I was introduced by a friend named Lisa Rice to this funding service and undergone the due process of obtaining a loan from the company, to my greatest surprise within 5 working days just like my friend Lisa, I was also granted a loan of $216,000.00 So my advise to everyone who desires a loan, "if you must contact any firm with reference to securing a loan online with low interest rate of 1.9% rate and better repayment plans/schedule, please contact this funding service. Besides, he doesn't know that am doing this but due to the joy in me, I'm so happy and wish to let people know more about this great company whom truly give out loans, it is my prayer that GOD should bless them more as they put smiles on peoples faces. You can contact them via email on { 247officedept@gmail.com} or Text through Whatsapp +1-989 394 3740.

    ReplyDelete
  17. This post is adequate to cause someone to comprehend this stunning thing, and I'm certain everybody will see the value in this intriguing thing. https://www.a2zclothing.com/

    ReplyDelete
  18. This post is sufficient to make somebody fathom this shocking thing, and I'm sure everyone will see the worth in this interesting thing. https://www.a2zclothing.com/

    ReplyDelete
  19. 스포츠토토티비
    스포츠토토


    Loved this blog. Such blogs should be made more often. Huge kudos to u

    ReplyDelete
  20. How To Embed Files And Videos Responsively Into Blog Or Website? >>>>> Download Now

    >>>>> Download Full

    How To Embed Files And Videos Responsively Into Blog Or Website? >>>>> Download LINK

    >>>>> Download Now

    How To Embed Files And Videos Responsively Into Blog Or Website? >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete
  21. 토토사이트
    먹튀검증
    토토365프로


    Greetings! I know this is kinda off topic however , I’d figured I’d ask.Would you be interested in trading links or maybe guest writing a blog post or vice-versa? My site addresses a lot of the same topics as yours and I believe we could greatly benefit from each other.

    ReplyDelete
  22. Great post. I was checking constantly this blog and I’m impressed!Very useful information specifically the last part 🙂 I care for such info much. I was seeking this certain info for a very long time.Thank you and best of luck.My blog post


    스포츠중계
    토토사이트
    토토

    ReplyDelete
  23. First of all I want to say wonderful blog! I had a quick question which I’d like to ask if you don’t mind. I was interested to know how you center yourself and clear your mind before writing.I have had a tough time clearing my mind in getting my ideas out.I do enjoy writing however it just seems like the first 10 to 15 minutes tend to be lost simply just trying to figure out how to begin. Any recommendations or hints?


    토토사이트
    토토
    배트맨토토

    ReplyDelete
  24. Great blog! Thinking about studying abroad but don't know how to write an application to the authorities? then, BookMyEssay is just for you! We provide Research Proposal Help. Our expert gives you 100% plagiarism free, error-free and original assignments.

    ReplyDelete
  25. Thanks for sharing such a useful information about Imbedding Files and Videos Responsively into Blog or Website. This would a big help for me. Now, it's time to get the services of Digital Consultancy click for more information.

    ReplyDelete
  26. Excellent work. Truly appreciate your post. We would be veru delighted you checking our dissertation proofreading by Academic assignments. we provide assignments written by experts, customized content and on time delivery.

    ReplyDelete
  27. First of all, I would like to appreciate your efforts towards this piece of blog. This helps me a lot. Keep it up and keep sharing such posts.
    In the world of digitalization, everything is now on tips. From banking to online shopping, everything is digital. In the field of education, digitalization also plays an important role, especially at the time when the whole world was suffering from covid. Now, students prefer to take online tuition classes instead of live classes as it saves time and effort. Students of class 5th to class 12th mostly take online tuition for class 5 to class 12th as students of higher classes need extra support.
    Typical Science Curriculum for First Grade

    ReplyDelete
  28. I read your post and I find it very interesting. Please keep me updated. Now its time to avail aluminum window and door for more information.

    ReplyDelete
  29. I was searching to read that kind of article and I finally found it. It is very helpful content. Now its time to avail limo service boise for more information.

    ReplyDelete
  30. it is a good website online submit wis great content in your readers. 스포츠토토

    ReplyDelete
  31. amazing read, advantageous site, where did u come 스포츠토토

    ReplyDelete
  32. i am positive they may locate it extremely helpful too. This is a superb put up. This publish offers definitely satisfactory records. I’m surely going to investigate it. Genuinely very beneficial guidelines are supplied right here. Thanks so much. Maintain up the good works 토토시대 먹튀검증

    ReplyDelete
  33. thanks for writing such tremendous content material. Your thoughts help me on /s634/sh/087ed02d-be0c-c34c-a37c-ba49e391d0ae/722c4c3bd305af502c0d02104adf76d4">먹튀연구실 검증업체

    ReplyDelete
  34. As a Digital SEO Expert and blogger, I can say that embedding videos or files on a website can be used as advertising content, helping to get your brand or content across to more people. Trademark Registration

    ReplyDelete

Need to add an image/video?
[img]http://i681.photobucket.com/albums/vv180/kylekaulitzalyamani/tips.jpg[/img]
Thank you so much for taking the time to comment this post! ♥