28:null 29:["$","title",null,{"children":"Embed | Jerry Jäppinen | Observable"}] 2e:T1b41,embed( '

View this post on Instagram

A post shared by Jerry Jäppinen (@jerryjappinen)

' )2f:T1b5b,function instagram(instagramPostId) { return embed( `

View this post on Instagram

` ); }30:[{"id":"62fc18933eb920cc569510de7d67e34c81513ddca3926954bebcbd34ee9f67dd1ac2fa8f012898159c9066e32d6e9d838c417f03970ab703891119837fd9223d","href":"https://static.observableusercontent.com/files/62fc18933eb920cc569510de7d67e34c81513ddca3926954bebcbd34ee9f67dd1ac2fa8f012898159c9066e32d6e9d838c417f03970ab703891119837fd9223d","name":"UX design in the wild.pdf","type":"application/pdf","lastModified":1770892833507.43,"size":365515},{"id":"c15109ab6733b649d810c7b11589f9160c9d9cdacabec133175cdac67aead0f1fc651864d4cffdd270592c4475e59d8f6577a7c522145d1d7257be9d48baca11","href":"https://static.observableusercontent.com/files/c15109ab6733b649d810c7b11589f9160c9d9cdacabec133175cdac67aead0f1fc651864d4cffdd270592c4475e59d8f6577a7c522145d1d7257be9d48baca11","name":"Derivatives.pdf","type":"application/pdf","lastModified":1770893534825.651,"size":22445}] 2c:{"id":"d9ba3948c4e1de3b","slug":"embed","title":"Embed","thumbnail":"83f8d1dc13c118864699bf16f3447c66585eaab108f34b3dbbc2f54385324113","access_level":"public","create_time":"$D2021-10-09T13:37:43.791Z","update_time":"$D2026-02-12T10:59:25.092Z","view_time":null,"first_public_time":"$D2021-10-09T19:21:29.812Z","has_unpublished_edits":null,"fork":false,"stars":10,"starred":false,"owner":{"type":"team","id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":"starter_2024"},"version":1714,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null}],"members":[{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null,"role":"editor"}],"comments":[{"id":"7852201525f5b547","reply_to_id":null,"content":"This is great! I was able to get github gists embed working! https://observablehq.com/@triptych/testing-embed","create_time":"$D2021-10-10T03:06:17.007Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}},{"id":"8f711702cec36736","reply_to_id":"7852201525f5b547","content":"That's a great use case, thanks for pointing it out! I added it to the examples.","create_time":"$D2021-10-10T09:05:57.355Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5e1c1d34cf3c138c","login":"jerryjappinen","name":"Jerry Jäppinen","avatar_url":"https://avatars-next.observableusercontent.com/da68ef84738ce83ecc0aca0bac01d671eeaa7b46c1b3e4333452f0dc24a48f2f","tier":null}},{"id":"50fc7df60eb9d131","reply_to_id":"7852201525f5b547","content":"Another fun embed usecase for your code -> https://observablehq.com/@triptych/test-embedded-shoutcast-player","create_time":"$D2021-11-12T22:37:07.425Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"472c088ec1a9671b","slug":"libraries","title":"Libraries","owner":{"id":"78ae8536857bb3ab","login":"jerryjappinen","name":"Jerry Jäppinen"}},"type":"notebook","body":{"title":"Embed","cells":[{"id":0,"value":"# Embed","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"Shareable embed codes from many services like *Wolfram Alpha*, *Twitter* and *GitHub* [don't work in Observable](https://twitter.com/jerryjappinen/status/1445835967252746248) because they use `

', 400)\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1493,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1659,"value":"### PDFs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1451,"value":"Render a PDF attachment:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1665,"value":"```js\nimport { pdf } from \"@jerryjappinen/embed\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1677,"value":"_demo_doc = FileAttachment(\"Derivatives.pdf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1679,"value":"pdf(_demo_doc)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1662,"value":"Multi-page PDFs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1478,"value":"```js\nimport { pdf, pdfPages } from \"@jerryjappinen/embed\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1701,"value":"_demo_slides = FileAttachment(\"UX design in the wild.pdf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"viewof pdf_page = Inputs.range([1, await pdfPages(_demo_slides)], { step: 1, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"pdf(_demo_slides, pdf_page)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1667,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1668,"value":"Set viewer width:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1670,"value":"```js\npdf(attachment, 1, 480) // Absolute width\npdf(attachment, 1, width) // Full width\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"## Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"Any HTML code should work with `embed()`. Some examples using popular services:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"### GitHub gists\n\nEmbed your Gist to show off your code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"```js\nembed('')\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"embed(\n ''\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### Twitter embed\n\n[Twitter Publish](https://publish.twitter.com/?query=https%3A%2F%2Ftwitter.com%2Fobservablehq%2Fstatus%2F1446741850019098630&widget=Tweet) gives you an embed code to copy-paste:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"```js\nembed('

Sorry for the delay, and great question. “HTML5 specifies that a <script> tag inserted with innerHTML should not execute”, which stymies the html`` literal. But you can put the whole thing in an iframe: https://t.co/QRG1SAsJnT
— Observable (@observablehq) October 9, 2021

'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"### Instagram\n\nHad a cool meetup or co-creation workshop recently? Embed your [Instagram post](https://www.instagram.com/p/Bisaxw-nzHO/):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"```js\nembed('

`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"## Shorthands","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"These predefined shorthands make embedding popular services easy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1368,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1369,"value":"### Figma","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1376,"value":"function figma(fileId, nodeId) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1379,"value":"figma(\"egsN9lmc2dWJYdV0cf2cVP\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1371,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":684,"value":"### YouTube videos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":666,"value":"function youtube(videoId, startSeconds, w = 560) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"youtube(\"PZRI1IfStY0\", 0, 640)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1344,"value":"### Speaker Deck","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1351,"value":"speakerDeck(\"45fe4ba5fe414bf1a54dd8e869e36826\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"function speakerDeck(embedId, height) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":830,"value":"### Google Docs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"function googleDocs (publishId, height) {\n return embed(``)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"googleDoc = googleDocs // alias","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"googleDoc(\"2PACX-1vTTdxGh4CM9GNZuWTlm-H9OGsRlX2W5iqSrZhTVhT5U8yz_kIxCjGfDVsnj7gLTUtE3rIxpOttFjfkG\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":780,"value":"### Google Forms","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":781,"value":"function googleForms (publishId, height) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":784,"value":"googleForm = googleForms // alias","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"googleForm(\"1FAIpQLSdfToTGc36Hfc7erII7k9ROV_gOWNXiwzImtOizTdtFr3j8aA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"### Google Sheets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":718,"value":"See instructions in this notebook: [@jerryjappinen/google-sheets](https://observablehq.com/@jerryjappinen/google-sheets).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"googleSheets = embedGoogleSheet","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"googleSheet = googleSheets // alias","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":731,"value":"### Google Slides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":732,"value":"function googleSlides(publishId, options) {\n const { autoStart, loop, delay, width, height } = options || {};\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"googleSlide = googleSlides // alias","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"Supported options: `autoStart`, `loop`, `delay`, `width`, `height`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"googleSlides(\"2PACX-1vSPk73rTpnxIAUtdFvjeVX2sl70__OFMj1_ygpfvrBCKXRJUxR1q_Wjo1dnBU22BTgX2kxT_Blfdk_1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":680,"value":"### Twitter tweets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":581,"value":"function tweet(tweetId) {\n return embed(\n `

`\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"tweet(\"1446741850019098630\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":676,"value":"### GitHub Gists","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":614,"value":"function gist(userOrPath, gistId) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"gist(\"jerryjappinen/a52cf7d019e1665e0ccc05adf954305f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"gist(\"jerryjappinen\", \"a52cf7d019e1665e0ccc05adf954305f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"### SoundCloud","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1395,"value":"function soundcloud(playlistId) {\n return embed(\n ``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1398,"value":"soundcloud(1895143471)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1392,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"### Instagram posts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":638,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"instagram(\"BisaoboHvkE\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"## Source","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function embed(scriptHtml, height) {\n\n // Hackily auto adjust height\n // iframe content usually loads for a while and might change, so we auto adjust every 100ms\n // You can disable this by providing a fixed height\n const adjust = `obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';`;\n const onload = `setInterval(\n ((obj) => { return () => { ${adjust} } })(this),\n 100\n )`;\n\n // Html\n const style = `width:100%;border:none;${\n height ? \"height:\" + height + \"px;\" : \"\"\n }`;\n\n return Object.assign(\n html`