Anonymous Pens can't be embedded.
Edit on CodePen
{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"__pay_stripe_public":"pk_NgCjQmQs7wXOFmfNC0LKMgEkmlThn","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cp/internal/boomboom","store_url":"https://codepen.io/cp/internal/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"auto_save\":true,\"format_on_save\":false,\"indent_with\":\"spaces\",\"tab_size\":\"2\",\"id\":\"VoDkNZ\",\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":\"14\",\"font_type\":\"monaco\",\"html_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"theme\":\"twilight\"},\"hashid\":\"mQepRy\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":29810618,\"user_id\":1,\"html\":\"<div class=\\\"hero\\\">\\n <div class=\\\"hero__spacer\\\" aria-hidden=\\\"true\\\"></div>\\n <div class=\\\"hero__inner\\\">\\n <h1>A catchy headline</h1>\\n <p>This works by using two items in flex container. The spacer item has an aspect ratio applied that determines its own height. And the inner item's content height determines its own height. At any given screen size, the taller item wins.</p>\\n </div>\\n</div>\\n<div class=\\\"content\\\">\\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Et sollicitudin ac orci phasellus egestas. Mattis molestie a iaculis at. Nisi scelerisque eu ultrices vitae. In fermentum et sollicitudin ac. Tincidunt id aliquet risus feugiat in. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Mi bibendum neque egestas congue quisque egestas diam. Posuere lorem ipsum dolor sit amet consectetur. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus quam id leo in vitae turpis. Blandit aliquam etiam erat velit scelerisque in dictum. Quis commodo odio aenean sed adipiscing diam donec.</p>\\n</div>\",\"css\":\"*, *::before, *::after { \\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n}\\n\\n/* holds two items - and whichever item is taller wins. And, you can set a min-height if you want...but you don't have to. */\\n.hero {\\n display: flex;\\n min-height: 30rem;\\n}\\n\\n/* holds the intrinsic aspect ratio. unfortunately, you need this extra node for it to work in all browsers, including IE. if you try to set the intrinsic aspect ratio directly on a flex child where the width is a percentage, it'll get all jacked up and won't work. */\\n.hero__spacer {\\n width: 100%;\\n margin-left: -100%;\\n}\\n\\n/* apply the intrinsic aspect ratio to a before/after - because THIS item is not a direct flex child. */\\n.hero__spacer::before {\\n content: \\\"\\\";\\n display: block;\\n width: 100%;\\n padding-top: 56.25%;\\n}\\n\\n/* by making this item a flex container, you can easily vertically center the content. its even easier if you wrap the content inside one more div and center that all at once.*/\\n.hero__inner {\\n display: flex;\\n width: 100%;\\n padding: 4rem;\\n text-align: center;\\n flex-direction: column;\\n justify-content: center;\\n background-image: url(https://images.unsplash.com/photo-1536228891610-d27ef66f7110);\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center;\\n}\\n\\n.hero__inner h1 {\\n font-size: 68px;\\n margin: 0;\\n}\\n\\n.hero__inner p {\\n font-size: 18px;\\n margin-bottom: 2rem;\\n}\\n\",\"parent\":0,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2018-11-07T00:56:36.000Z\",\"updated_at\":\"2018-11-07T00:56:36.000Z\",\"session_hash\":\"6882fc6d908297fc2eba900d99e29d1a\",\"title\":\"\",\"description\":\"\",\"slug_hash\":\"mQepRy\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":null,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":false,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTYyNzMyMDAzOX0.II0ACwbCoI_THGrmRVEbsMzZKgMgWA8Sg73Cj53VDsY","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-d8236034cc3508e70b0763f2575a8bb5850f9aea541206ce56704c013047d712.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-8216c69d01441f36c0ea791ae2d4469f0f8ff5326f00ae2d00e4bb7d20e24edb.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}