{"id":869,"date":"2012-05-28T20:54:56","date_gmt":"2012-05-28T19:54:56","guid":{"rendered":"http:\/\/ed.primaryblogger.co.uk\/?p=869"},"modified":"2012-05-28T20:54:56","modified_gmt":"2012-05-28T19:54:56","slug":"responsive-online-video","status":"publish","type":"post","link":"https:\/\/ed.gs\/2012\/05\/28\/responsive-online-video\/","title":{"rendered":"Responsive Online Video"},"content":{"rendered":"
Want YouTube\/Vimeo videos to be responsive? Try wrapping the iframe code in a div.<\/p>\n
<div class="video">\n\n</div><\/pre>\nUse the following CSS.<\/p>\n
.video {\nposition: relative;\npadding-bottom: 56.25%;\npadding-top: 30px;\nheight: 0;\noverflow: hidden;\n}\n \n.video iframe, .video object, .video embed {\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nheight: 100%;\n}\n \n.entry-content img, .entry-content iframe, .entry-content object, .entry-content embed {\nmax-width: 100%;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"Want YouTube\/Vimeo videos to be responsive? Try wrapping the iframe code in a div. <div class="video"> </div> Use the following CSS. .video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .entry-content img, .entry-content […]<\/p>\n","protected":false},"author":2,"featured_media":3567,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ep_exclude_from_search":false},"categories":[18],"tags":[],"yoast_head":"\n
Responsive Online Video - E<\/title>\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\t\n