{"id":675,"date":"2017-10-03T01:04:17","date_gmt":"2017-10-03T01:04:17","guid":{"rendered":"http:\/\/www.remotedevelopment.co.uk\/cms\/?p=675"},"modified":"2017-10-03T01:05:56","modified_gmt":"2017-10-03T01:05:56","slug":"making-youtube-video-responsive","status":"publish","type":"post","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/making-youtube-video-responsive\/","title":{"rendered":"Making Youtube video responsive"},"content":{"rendered":"

This solution was pioneered by Thierry Koblentz and presented on A List Apart in 2009:\u00a0Creating Intrinsic Ratios for Video<\/a>. With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.<\/p>\n

.videoWrapper {\r\n\tposition: relative;\r\n\tpadding-bottom: 56.25%; \/* 16:9 *\/\r\n\tpadding-top: 25px;\r\n\theight: 0;\r\n}\r\n.videoWrapper iframe {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\twidth: 100%;\r\n\theight: 100%;\r\n}<\/code><\/pre>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
This solution was pioneered by Thierry Koblentz and presented on A List Apart in 2009:\u00a0Creating Intrinsic Ratios for Video. With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on. … <\/p>\n
Continue reading “Making Youtube video responsive”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8yghz-aT","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":866,"url":"https:\/\/www.remotedevelopment.co.uk\/cms\/spa-version-of-remote-development\/","url_meta":{"origin":675,"position":0},"title":"SPA version of Remote Development","author":"Nicholas","date":"January 11, 2018","format":false,"excerpt":"The SPA version of Remote Development shall be the website that this CMS site augments. Its functions are to sell the concept of remote development as directly as possible and then to present three CTAs: Online Application Manage your own content Sell products and services online No complexity, no verbiage,\u2026","rel":"","context":"In "New articles"","block_context":{"text":"New articles","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/category\/new-articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":614,"url":"https:\/\/www.remotedevelopment.co.uk\/cms\/how-to-wordpress-making-a-new-post\/","url_meta":{"origin":675,"position":1},"title":"How to: WordPress: Make a post 1","author":"Nicholas","date":"September 25, 2017","format":false,"excerpt":"Login to your wordpress account: websiteaddress.com\/wp-admin the top black menu is a quick way to do useful things in Wordpress. on the Left is a W in a circle (wordpress link), then a HOME button and the site name. \u00a0Then indications of how many updates are available, how many comments\u2026","rel":"","context":"In "How to guides"","block_context":{"text":"How to guides","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/category\/support\/how-to\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":636,"url":"https:\/\/www.remotedevelopment.co.uk\/cms\/picking-and-specifying-web-colour\/","url_meta":{"origin":675,"position":2},"title":"Picking and specifying web colour","author":"Nicholas","date":"September 26, 2017","format":false,"excerpt":"Or color - the American spelling is used on the web. \u00a0The English version is used in novels. We have a system for specifying a colour with 256 stages for each primary. RGBA = Red Green Blue Alpha. \u00a0Alpha is the opacity level, and defaults to 1 (100% - i.e.\u2026","rel":"","context":"In "How to guides"","block_context":{"text":"How to guides","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/category\/support\/how-to\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":386,"url":"https:\/\/www.remotedevelopment.co.uk\/cms\/agile\/","url_meta":{"origin":675,"position":3},"title":"Agile","author":"Nicholas Alexander","date":"August 23, 2017","format":false,"excerpt":"Agile Software Development was developed by some of the best minds in our industry. Years ago. Since 1998 it has become the way to do things. Short Iterations We use 10 day sprints (over two weeks). During each Sprint, we follow a sprint plan. We need two basic sprint plans\u2026","rel":"","context":"In "technical"","block_context":{"text":"technical","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/category\/technical\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":972,"url":"https:\/\/www.remotedevelopment.co.uk\/cms\/keeping-wordpress-up-to-date\/","url_meta":{"origin":675,"position":4},"title":"Keeping WordPress up to date","author":"Nicholas","date":"August 4, 2018","format":false,"excerpt":"Remote Developers who support clients using Wordpress must consider some very simple rules.\u00a0 Our hosted services support observation of these rules so that end clients, editors, authors and contributors have the simplest and richest, most secure and successful experience of using a great product which has become the industry standard\u2026","rel":"","context":"In "Archived"","block_context":{"text":"Archived","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/category\/archived\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.remotedevelopment.co.uk\/cms\/wp-content\/uploads\/2018\/08\/2012-06-07-15.12.30.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":436,"url":"https:\/\/www.remotedevelopment.co.uk\/cms\/getting-clients-on-board\/","url_meta":{"origin":675,"position":5},"title":"Getting on board","author":"Nicholas","date":"August 23, 2017","format":false,"excerpt":"Getting started The first step is to register and then you can access our services immediately. Once registered as a client you see this screen: Here is an illustrative example of our user-friendly introduction form so we know the name of your business and whatever you want to tell us\u2026","rel":"","context":"In "Client"","block_context":{"text":"Client","link":"https:\/\/www.remotedevelopment.co.uk\/cms\/category\/client\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.remotedevelopment.co.uk\/cms\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-09-26-at-09.07.11.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.remotedevelopment.co.uk\/cms\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-09-26-at-09.07.11.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.remotedevelopment.co.uk\/cms\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-09-26-at-09.07.11.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.remotedevelopment.co.uk\/cms\/wp-content\/uploads\/2017\/08\/Screen-Shot-2017-09-26-at-09.07.11.png?resize=700%2C400 2x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/posts\/675"}],"collection":[{"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/comments?post=675"}],"version-history":[{"count":2,"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":677,"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/posts\/675\/revisions\/677"}],"wp:attachment":[{"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.remotedevelopment.co.uk\/cms\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}