{"id":844,"date":"2019-11-25T15:21:25","date_gmt":"2019-11-25T15:21:25","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/?p=844"},"modified":"2019-11-25T15:41:22","modified_gmt":"2019-11-25T15:41:22","slug":"responsive-media-embeds","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/2019\/11\/25\/responsive-media-embeds\/","title":{"rendered":"Responsive Media Embeds"},"content":{"rendered":"\n<p>Here are some CodePens on embedding responsive Media. They all follow the same basic principle:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Wrap the embed code (usually an iframe) in a div with a class and then do most of the styling on the div in your CSS.<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive Video Embed<\/h3>\n\n\n\n<p>With video, it is important to keep the aspect ratio (the relationship between the width and the height of the video) the same. Otherwise you will get black bars or stretching as your site changes width and the video tries to accommodate.<\/p>\n\n\n\n<p>The CodePen below shows how to use a trick where you wrap the video in a div and then set the div height to 0 but include a bottom padding that is a percentage. Using a percentage in this way make the height a percentage of the width and so keeps the correct aspect ratio.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"html,result\" data-user=\"profstein\" data-slug-hash=\"mArLRj\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Video Embed\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/mArLRj\">\n  Responsive Video Embed<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Google Map Embed<\/h2>\n\n\n\n<p>This CodePen shows how you can embed a Google Map on a site in a responsive way.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"html,result\" data-user=\"profstein\" data-slug-hash=\"BmeOda\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Google Map Embed\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/BmeOda\">\n  Responsive Google Map Embed<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive Google Calendar Embed<\/h3>\n\n\n\n<p>This CodePen shows how you can embed a Google Calendar.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"html,result\" data-user=\"profstein\" data-slug-hash=\"ozrbPJ\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Google Calendar Embed\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/ozrbPJ\">\n  Responsive Google Calendar Embed<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here are some CodePens on embedding responsive Media. They all follow the same basic principle: Wrap the embed code (usually an iframe) in a div with a class and then do most of the styling on the div in your CSS. Responsive Video Embed With video, it is important to keep the aspect ratio (the [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":854,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[17,7],"tags":[127,66,126],"class_list":{"0":"post-844","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-media","8":"category-resource","9":"tag-embed","10":"tag-responsive","11":"tag-responsive-video","12":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/844","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/comments?post=844"}],"version-history":[{"count":3,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/844\/revisions"}],"predecessor-version":[{"id":871,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/posts\/844\/revisions\/871"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media\/854"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/media?parent=844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/categories?post=844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-240-fall-19-stein\/wp-json\/wp\/v2\/tags?post=844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}