{"id":748,"date":"2023-08-01T13:43:04","date_gmt":"2023-08-01T13:43:04","guid":{"rendered":"https:\/\/williamcromar.com\/newmediawiki\/?page_id=748"},"modified":"2025-08-07T13:02:50","modified_gmt":"2025-08-07T13:02:50","slug":"embeds","status":"publish","type":"page","link":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/","title":{"rendered":"Embeds"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/div>\n<label for=\"ez-toc-cssicon-toggle-item-69f4e82bb0342\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f4e82bb0342\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Images\" >Images<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Single_Flickr_image\" >Single Flickr image<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_responsive\" >WordPress, responsive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_fixed_size\" >Code, fixed size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_responsive\" >Code, responsive<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Flickr_slideshow\" >Flickr slideshow<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_pseudo-responsive\" >WordPress, pseudo-responsive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_fixed_size-2\" >Code, fixed size<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_responsive-2\" >Code, responsive<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#GIF_or_APNG_static_or_animated\" >GIF or APNG, static or animated<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_responsive-2\" >WordPress, responsive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_responsive-3\" >Code, responsive<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#SVG_static_or_animated\" >SVG, static, or animated<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_responsive-3\" >WordPress, responsive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_responsive-4\" >Code, responsive<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Video\" >Video<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Video_embeds_with_minimalist_chrome\" >Video embeds with minimalist chrome<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Self-hosted_responsive\" >Self-hosted, responsive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_using_Vimeo_or_YouTube_URL\" >WordPress using Vimeo or YouTube URL<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_using_generated_iframe_responsive\" >Code using generated iframe, responsive<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Audio\" >Audio<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Self-hosted_sound_file\" >Self-hosted sound file<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress\" >WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_responsive_width\" >Code, responsive width<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Hosted_music_or_podcast\" >Hosted music or podcast<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_Soundcloud_hosted\" >WordPress, Soundcloud hosted<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_Soundcloud_hosted_minimal_chrome\" >Code, Soundcloud hosted, minimal chrome<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Slide_decks\" >Slide decks<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Google_Slides\" >Google Slides<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Google_Slides_fixed_size_pseudo-responsive\" >Google Slides, fixed size (pseudo-responsive)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Google_Slides_responsive_looping_no_controls\" >Google Slides, responsive, looping, no controls<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Powerpoint\" >Powerpoint<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Powerpoint_fixed_size\" >Powerpoint, fixed size<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Adobe_Express\" >Adobe Express<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Adobe_Express_fixed_size\" >Adobe Express, fixed size<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#3D_models_and_interactives\" >3D models and interactives<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Models\" >Models<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#p3D_hosted_pseudo-responsive\" >p3D hosted, pseudo-responsive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Fusion_360_pseudo-responsive_scaled_UI\" >Fusion 360, pseudo-responsive, scaled UI<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Interactives\" >Interactives<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#ThreeJS_interactive\" >ThreeJS interactive<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#HTML5_animated_interactive\" >HTML5 animated interactive<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Publications\" >Publications<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#PDF\" >PDF<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Yumpu_hosted_flipbook\" >Yumpu hosted flipbook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#WordPress_hosted_document\" >WordPress hosted document<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Cloud_documents\" >Cloud documents<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Google_Docs_Sheets_or_Forms\" >Google Docs, Sheets, or Forms<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-49\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Word_Excel_or_Microsoft_Forms\" >Word, Excel, or Microsoft Forms<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"801\" height=\"1024\" data-attachment-id=\"749\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/72-183\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg\" data-orig-size=\"801,1024\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"72.183\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg\" alt=\"\" class=\"wp-image-749\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg 801w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183-235x300.jpg 235w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183-768x982.jpg 768w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183-300x384.jpg 300w\" sizes=\"auto, (max-width: 801px) 100vw, 801px\" \/><figcaption class=\"wp-element-caption\"><em><em>The Healer,&nbsp;Ren\u00e9 Magritte, 1967<\/em><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p>This is a library of methods for embedding various media into WordPress or hand-coded websites, with an emphasis on responsive design. Updated to include the new <a href=\"https:\/\/web.dev\/aspect-ratio\/\" target=\"_blank\" rel=\"noreferrer noopener\">aspect-ratio CSS property<\/a>&#8230; no more hacky padding!<\/p>\n\n\n\n<p>In the WordPress ecosystem, some plug-ins provide functionality, but over-reliance on plug-ins can lead to trouble. With a little code, you can avoid that \u2014&nbsp;and get more fine-grained control over your work.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Images\"><\/span>Images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Single_Flickr_image\"><\/span>Single Flickr image<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-photo is-provider-flickr wp-block-embed-flickr\"><div class=\"wp-block-embed__wrapper\">\n<a href=\"https:\/\/flic.kr\/p\/2oshfR4\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/65535\/52805942069_1468e103d1_b.jpg\" alt=\"Kirkton of Aboyne &amp; Environs, Being an artist\u2019s conception pertinent to the origins of the Cromar Sept of Clan Farquharson\" width=\"1024\" height=\"769\" \/><\/a>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_responsive\"><\/span>WordPress, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Most modern WordPress themes will create a responsive image for you that will change size for specific device display.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select a&nbsp;<strong>Flickr<\/strong>&nbsp;image<\/li>\n\n\n\n<li>Select&nbsp;<strong>Share photo<\/strong>&nbsp;icon: the curved arrow at the lower right of image<\/li>\n\n\n\n<li>Select&nbsp;<strong>Share<\/strong>&nbsp;and copy the URL<\/li>\n\n\n\n<li>Paste on its own line in a post to automatically create a responsive Flickr embed<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<a data-flickr-embed=\"true\" data-context=\"true\" href=\"https:\/\/www.flickr.com\/photos\/williamcromar\/52805942069\/in\/album-72177720315295622\/\" title=\"Kirkton of Aboyne\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/65535\/52805942069_1468e103d1_c.jpg\" width=\"800\" height=\"601\" alt=\"Kirkton of Aboyne\"\/><\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_fixed_size\"><\/span>Code, fixed size<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select a&nbsp;<strong>Flickr<\/strong>&nbsp;image<\/li>\n\n\n\n<li>Select&nbsp;<strong>Share photo<\/strong>&nbsp;icon<\/li>\n\n\n\n<li>Select&nbsp;<strong>Embed<\/strong>, choose size, and copy code<\/li>\n\n\n\n<li>Paste into html for your page<\/li>\n\n\n\n<li>Customize&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>width=\"XXX\"<\/code><\/mark><\/strong>&nbsp;and&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>height=\"YYY\"<\/code><\/mark><\/strong>&nbsp;if desired:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [2]; title: ; notranslate\" title=\"\">\n&lt;a data-flickr-embed=&quot;true&quot; data-context=&quot;true&quot; href=&quot;https:\/\/www.flickr.com\/photos\/williamcromar\/52805942069\/in\/album-72177720315295622\/&quot; title=&quot;Kirkton of Aboyne&quot;&gt;&lt;img src=&quot;https:\/\/live.staticflickr.com\/65535\/52805942069_1468e103d1_c.jpg&quot; width=&quot;800&quot; height=&quot;601&quot; alt=&quot;Kirkton of Aboyne&quot;\/&gt;&lt;\/a&gt;\n&lt;!--Delete the scrjpt:--&gt;\n&lt;scrjpt async src=&quot;\/\/embedr.flickr.com\/assets\/client-code.js&quot; charset=&quot;utf-8&quot;&gt;&lt;\/scrjpt&gt;\n<\/pre><\/div>\n\n\n<p class=\"has-vivid-red-color has-text-color has-small-font-size\"><em>** letter <strong>i<\/strong> in <strong>script<\/strong> changed to <strong>j <\/strong>to disable response<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style>\n.container99 {\n\tposition: relative;\n\taspect-ratio: 4\/3;\n\twidth: 100%;\n\theight:100%;\n}\n.imgscale99 {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\twidth:100%;\n\theight:100%;\n}\n<\/style>\n<a href=\"https:\/\/www.flickr.com\/photos\/williamcromar\/52805942069\/in\/album-72177720315295622\/\" title=\"Kirkton of Aboyne\" target=\"_blank\" rel=\"noopener\">\n<div class=\"container99\">\n<img loading=\"lazy\" decoding=\"async\" class=\"imgscale99\" src=\"https:\/\/live.staticflickr.com\/65535\/52805942069_1468e103d1_c.jpg\" width=\"800\" height=\"601\" alt=\"Kirkton of Aboyne\"\/><\/a>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_responsive\"><\/span>Code, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select a&nbsp;<strong>Flickr<\/strong>&nbsp;image<\/li>\n\n\n\n<li>Select&nbsp;<strong>Share photo<\/strong>&nbsp;icon<\/li>\n\n\n\n<li>Select&nbsp;<strong>Embed<\/strong>, choose <strong>large<\/strong> or <strong>original<\/strong> size, and copy code<\/li>\n\n\n\n<li>Delete&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>width<\/code><\/mark><\/strong>&nbsp;and&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>height<\/code><\/mark><\/strong>&nbsp;parameters, and delete the entire <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">script<\/mark><\/strong><\/code><\/li>\n\n\n\n<li>Create the following CSS in the head of the html:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n.container {\n\tposition: relative;\n\taspect-ratio: 3\/2;\n\twidth: 100%;\n\theight:100%;\n}\n.imgscale {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\twidth:100%;\n\theight:100%;\n}\n&lt;\/style&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Create a new <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;div&gt;<\/mark><\/strong><\/code> around the <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;img&gt;<\/mark><\/strong><\/code>, and apply class <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>container<\/code><\/mark><\/strong> to the <strong><code>&lt;div&gt;<\/code><\/strong> and class <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>imgscale<\/code><\/mark><\/strong> to <strong><code>&lt;img&gt;<\/code><\/strong>:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [2,3]; title: ; notranslate\" title=\"\">\n&lt;a data-flickr-embed=&quot;true&quot; data-context=&quot;true&quot; href=&quot;https:\/\/www.flickr.com\/photos\/williamcromar\/52805942069\/in\/album-72177720315295622\/&quot; title=&quot;Kirkton of Aboyne&quot;&gt;\n&lt;div class=&quot;container&quot;&gt;\n&lt;img class=&quot;imgscale&quot; src=&quot;https:\/\/live.staticflickr.com\/65535\/52805942069_1468e103d1_c.jpg&quot; width=&quot;800&quot; height=&quot;601&quot; alt=&quot;Kirkton of Aboyne&quot;\/&gt;&lt;\/a&gt;\n&lt;\/div&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>This breaks the link back to Flickr, but their terms of service <strong>require<\/strong> a link. To fix, delete <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">data-flickr-embed=\"true\"<\/mark><\/code><\/strong> and add <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">target=\"_blank\"<\/mark><\/code><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [1]; title: ; notranslate\" title=\"\">\n&lt;a href=&quot;https:\/\/www.flickr.com\/photos\/williamcromar\/28052123767\/in\/album-72157695032282922\/&quot; title=&quot;31402e1&quot; target=&quot;_blank&quot;&gt;\n&lt;div class=&quot;container&quot;&gt;\n&lt;img class=&quot;imgscale&quot; src=&quot;https:\/\/live.staticflickr.com\/875\/28052123767_8c056d7e09_o.jpg&quot; alt=&quot;31402e1&quot;\/&gt;\n&lt;\/div&gt;\n&lt;\/a&gt;\n<\/pre><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Flickr_slideshow\"><\/span>Flickr slideshow<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Trickier than it should be! WordPress plug-ins exist but are not optimal. Coding helper sites exist, such as <a href=\"https:\/\/flickrembed.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">flickrembed.com<\/a>. However, you&#8217;re dependent upon their self-hosted scripts, and if they go down, your gallery goes with it. Better just to download and use your own scripts if you have a server: <a href=\"https:\/\/unitegallery.net\/index.php\" target=\"_blank\" rel=\"noreferrer noopener\">Unite Gallery<\/a> is a great one (flickerembed.com is built with it). <\/p>\n\n\n\n<p>But if you just want to embed a darn slideshow and be done with it here are some solutions without cost or technical weeds.<\/p>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<figure class=\"wp-block-embed aligncenter is-type-rich is-provider-flickr wp-block-embed-flickr\"><div class=\"wp-block-embed__wrapper\">\n<a data-flickr-embed='true' href='https:\/\/www.flickr.com\/photos\/williamcromar\/albums\/72177720315295622' title='2013+ by williamcromar, on Flickr'><img src='https:\/\/live.staticflickr.com\/65535\/52805942069_1468e103d1_b.jpg' width='800' height='600' alt='Kirkton of Aboyne &amp; Environs, Being an artist\u2019s conception pertinent to the origins of the Cromar Sept of Clan Farquharson'><\/a><script async src='https:\/\/embedr.flickr.com\/assets\/client-code.js' charset='utf-8'><\/script>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_pseudo-responsive\"><\/span>WordPress, pseudo-responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open a&nbsp;<strong>Flickr<\/strong>&nbsp;<em>album<\/em> in a browser window<\/li>\n\n\n\n<li>Copy the URL for the album<\/li>\n\n\n\n<li>Paste on a new line in a post to automatically create a &#8220;responsive-ish&#8221; Flickr embed<\/li>\n<\/ul>\n\n\n\n<p>Resize the browser window on the desktop and you can see the liability of this solution: the embed frame is responsive to a degree, but the image is not, and this can hide the controls. Refreshing the browser window can reset the image size, but this a is pretty counterintuitive UX. Use it with caution.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<a data-flickr-embed=\"true\" href=\"https:\/\/www.flickr.com\/photos\/williamcromar\/albums\/72177720315295622\" title=\"2013+\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/live.staticflickr.com\/8505\/8398666348_857aaeda7a_c.jpg\" width=\"800\" height=\"600\" alt=\"2013+\"\/><\/a>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_fixed_size-2\"><\/span>Code, fixed size<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open&nbsp;<strong>Flickr<\/strong>&nbsp;<em>album<\/em><\/li>\n\n\n\n<li>Select&nbsp;the <strong>Share album<\/strong>&nbsp;icon on the album  page: the curved arrow under the album title<\/li>\n\n\n\n<li>Select&nbsp;<strong>Embed<\/strong>, select a size, and copy the code<\/li>\n\n\n\n<li>Paste into HTML for your page<\/li>\n\n\n\n<li>Customize&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>width=\"XXX\"<\/code><\/mark><\/strong>&nbsp;and&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>height=\"YYY\"<\/code><\/mark><\/strong>&nbsp;if desired:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [2]; title: ; notranslate\" title=\"\">\n&lt;a data-flickr-embed=&quot;true&quot; href=&quot;https:\/\/www.flickr.com\/photos\/williamcromar\/albums\/72157695032282922&quot; title=&quot;3dModelingElements&quot;&gt;\n&lt;img src=&quot;https:\/\/live.staticflickr.com\/1802\/42921015881_53f3fcea37_z.jpg&quot; width=&quot;270&quot; height=&quot;180&quot; alt=&quot;3dModelingElements&quot;\/&gt;\n&lt;\/a&gt;\n&lt;!--Delete the scrjpt:--&gt;\n&lt;scrjpt async src=&quot;\/\/embedr.flickr.com\/assets\/client-code.js&quot; charset=&quot;utf-8&quot;&gt;&lt;\/scrjpt&gt;\n<\/pre><\/div>\n\n\n<p class=\"has-vivid-red-color has-text-color has-small-font-size\"><em>** letter <strong>i<\/strong> in <strong>script<\/strong> changed to <strong>j <\/strong>to disable response<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"width: 100%; height: auto; aspect-ratio: 16\/9;\" src=\"https:\/\/embedr.flickr.com\/photosets\/72177720315295622\" scrolling=\"no\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_responsive-2\"><\/span>Code, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select a&nbsp;<strong>Flickr<\/strong>&nbsp;<em>album<\/em>. <\/li>\n\n\n\n<li>Note and copy the unique identifier for the album \u2013 the numbers at the end of the URL as in this example: <code>https:\/\/www.flickr.com\/photos\/williamcromar\/albums\/<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">72157695032282922<\/mark><\/code><\/li>\n\n\n\n<li>Copy and paste the number only into this iframe code (between <code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>photosets\/<\/strong><\/mark><\/code> and the closing <code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>\"<\/strong><\/mark><\/code> in the <code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>src<\/strong><\/mark><\/code>:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe style=&quot;width: 100%; height: auto; aspect-ratio: 16\/9;&quot; src=&quot;https:\/\/embedr.flickr.com\/photosets\/72157695032282922&quot; scrolling=&quot;no&quot;&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Though this is a disarmingly simple solution, it may ultimately be hacky. Flickr has been pushed around by changes in technology and ownership so who knows how long <strong>embedr.flickr.com<\/strong> will work&#8230;<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"GIF_or_APNG_static_or_animated\"><\/span>GIF or APNG, static or animated<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"429\" height=\"454\" data-attachment-id=\"876\" data-permalink=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/wind_turbine\/\" data-orig-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png\" data-orig-size=\"429,454\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Wind_turbine\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png\" alt=\"\" class=\"wp-image-876\" srcset=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png 429w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine-283x300.png 283w, https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine-300x317.png 300w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_responsive-2\"><\/span>WordPress, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Can host directly in Media Library, just insert as you would any other image \u2014 but using Thumbnail or Medium will disable any animation<\/li>\n\n\n\n<li>Themes often take care of image responsiveness automatically. If not use&nbsp;the code solution below.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-right\"><a href=\"https:\/\/commons.wikimedia.org\/wiki\/Category:Animated_PNG_files#\/media\/File:Wind_turbine.png\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Image source \u00bb<\/em><\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<img decoding=\"async\" style=\"width: 100%; height: auto; aspect-ratio: 1\/1;\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png\" alt=\"wind\">\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_responsive-3\"><\/span>Code, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Place <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;img&gt;<\/mark><\/code><\/strong> in your HTML then add inline <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>style<\/code><\/mark><\/strong> for <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/strong><\/code>, <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">height<\/mark><\/code><\/strong>, and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong><code>aspect-ratio<\/code><\/strong><\/mark> properties as per example:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;img style=&quot;width: 100%; height: auto; aspect-ratio: 1\/1;&quot; src=&quot;https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png&quot; alt=&quot;wind&quot;&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<img decoding=\"async\" style=\"width: 100%; max-width: 300; height: auto; aspect-ratio: 1\/1;\" src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png\" alt=\"wind\">\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>If limiting image size is desired to avoid over-scaling in a responsive context, use the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">max-width<\/mark><\/code><\/strong> property:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-white-background-color has-background is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;img style=&quot;width: 100%; max-width: 300; height: auto; aspect-ratio: 1\/1;&quot; src=&quot;https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/Wind_turbine.png&quot; alt=&quot;wind&quot;&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Inline style can of course be added as a class to the html head or a css file if flexibility of use is desired.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"SVG_static_or_animated\"><\/span>SVG, static, or animated<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:100%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<iframe style=\"width: 100%; height: auto; aspect-ratio: 3\/2.01;\" src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/05\/Moire_Circles.svg\" scrolling=\"no\" frameborder=\"0\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee;flex-basis:50%\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_responsive-3\"><\/span>WordPress, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Because SVG is a markup language like HTML, an SVG &#8220;file&#8221; is just code. WordPress Media Library will not host an SVG without a plug-in. Find a hosting solution for your image and use the code below. <\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_responsive-4\"><\/span>Code, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Place the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">iframe<\/mark><\/code><\/strong> code below in your HTML<\/li>\n\n\n\n<li>Replace the <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">src<\/mark><\/strong><\/code> with the URL of your file<\/li>\n\n\n\n<li>Change the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">aspect-ratio<\/mark><\/code><\/strong> property to match that of your image.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-right\"><em><a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/05\/Moire_Circles.svg\" target=\"_blank\" rel=\"noreferrer noopener\">Image source \u00bb<\/a><\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe style=&quot;width: 100%; height: auto; aspect-ratio: 3\/2.01;&quot; src=&quot;https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/05\/Moire_Circles.svg&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot;&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em><strong>Why the &#8220;2.01&#8221; in the aspect ratio?<\/strong><\/em><\/p>\n\n\n\n<p><em>The ratio of this vector image is 3\/2, but pixelation at certain scales creates a cutoff of the image edge. Making one variable slightly larger avoids a tangent with the image, creating clean pixelation at any scale.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Video\"><\/span>Video<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Video_embeds_with_minimalist_chrome\"><\/span>Video embeds with minimalist chrome<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In the context of a video embed, the term &#8220;chrome&#8221; refers to the fixed design aspect of the player. Some video hosts, such as <strong>Vimeo<\/strong>, allow a great deal of control over the amount of chrome you allow. Others, like <strong>YouTube<\/strong>, started out that way but their API is getting stricter by the day. A self-hosted video give you the most control but also uses a lot of your server resources.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<div style=\"position: relative; aspect-ratio: 16\/9; width: 100%; height:100%;\"><video style=\"position:absolute; top:0; left:0; width:100%; height:100%;\" no-controls autoplay muted loop src=\"https:\/\/williamcromar.com\/video\/glenco21.mp4\">Your browser does not support the video element<\/video><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Self-hosted_responsive\"><\/span>Self-hosted, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upload a video to a personal server<\/li>\n\n\n\n<li>Place the URL for the video in the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">src<\/mark><\/code><\/strong> of a <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>&lt;video&gt;<\/code><\/mark><\/strong> tag<\/li>\n\n\n\n<li>Place the <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;video&gt;<\/mark><\/strong><\/code> tag inside a <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>&lt;div&gt;<\/code><\/mark><\/strong><\/li>\n\n\n\n<li>Style the div and video as you see in the code below<\/li>\n\n\n\n<li>Include a variety of video parameters, such as <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">no-controls<\/mark><\/code><\/strong>, <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">autoplay<\/mark><\/code><\/strong>, <code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">muted<\/mark><\/strong><\/code>, or <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>loop<\/code><\/mark><\/strong>, to give you or the client a range of control over the look and play<\/li>\n\n\n\n<li>The inline styles can be changed to classes in the head of the HTML if desired.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div style=&quot;position: relative; aspect-ratio: 16\/9; width: 100%; height:100%;&quot;&gt;\n&lt;video style=&quot;position:absolute; top:0; left:0; width:100%; height:100%;&quot; no-controls autoplay muted loop src=&quot;https:\/\/williamcromar.com\/video\/glenco21.mp4&quot;&gt;\n&lt;\/video&gt;\nYour browser does not support the video element\n&lt;\/div&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Autoplay in audio and video should be used sparingly. It&#8217;s good for creating an active <a href=\"https:\/\/en.wiktionary.org\/wiki\/hero_image\" target=\"_blank\" rel=\"noreferrer noopener\">hero image<\/a>, for example.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-vertically-aligned-top is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"mondrianimation matt carlin\" src=\"https:\/\/player.vimeo.com\/video\/111212129?dnt=1&amp;app_id=122963\" width=\"1024\" height=\"576\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_using_Vimeo_or_YouTube_URL\"><\/span>WordPress using Vimeo or YouTube URL<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the video URL and paste it into the post. <\/li>\n\n\n\n<li>Most modern WordPress themes will automatically create a responsive video this way \u2014 if not, try a code-based solution.<\/li>\n<\/ul>\n\n\n\n<p>Note the&nbsp;<a href=\"https:\/\/stackoverflow.com\/questions\/5071905\/what-does-chrome-mean\" target=\"_blank\" rel=\"noreferrer noopener\">UI chrome<\/a> in this embed from <strong>Vimeo<\/strong>, where&nbsp;<strong><a href=\"https:\/\/vimeo.zendesk.com\/hc\/en-us\/articles\/224818047-Video-settings-overview#:~:text=To%20the%20right%20of%20the,you%20to%20additional%20video%20settings.\" target=\"_blank\" rel=\"noreferrer noopener\">Settings<\/a><\/strong> control the parameters \u2014 not the code \u2014 so you can get a minimalist solution this way.<\/p>\n\n\n\n<p>For&nbsp;<strong>YouTube<\/strong>, not so much \u2014 you have to use the&nbsp;<strong><a href=\"https:\/\/developers.google.com\/youtube\/player_parameters\" target=\"_blank\" rel=\"noreferrer noopener\">YouTube API<\/a><\/strong>&nbsp;to set parameters in code. YouTube allows much less control than Vimeo here.<\/p>\n\n\n\n<p><em>But, note the less-than-optimal vertical spacing: the actual video height in pixels persists! You have to get rid of that in a code-based solution.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"aspect-ratio: 16\/9; width: 100%; border:0px #ffffff none;\" src=\"https:\/\/williamcromar.com\/code_samples\/video_embed\/vimeo_responsive.html\" name=\"vimeoiframe\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0px\" marginwidth=\"0px\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_using_generated_iframe_responsive\"><\/span>Code using generated iframe, responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to the video at the hosting site and hit the Share button, then find an embed generator<\/li>\n\n\n\n<li>At YouTube, you&#8217;ll have to add CSS the same way we did for a Flickr single image using the <a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Code_responsive\">responsive code above<\/a>.<\/li>\n\n\n\n<li>At Vimeo, shown here, you can select a responsive option in the embed generator, then copy the code and paste it into your HTML:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div style=&quot;padding:56.25% 0 0 0;position:relative;&quot;&gt;\n&lt;iframe src=&quot;https:\/\/player.vimeo.com\/video\/111212129?h=d4ab8d73e3&amp;title=0&amp;byline=0&amp;portrait=0&quot; style=&quot;position:absolute; top:0; left:0; width:100%; height:100%;&quot; frameborder=&quot;0&quot; allow=&quot;fullscreen; picture-in-picture&quot; allowfullscreen&gt;&lt;\/iframe&gt;\n&lt;\/div&gt;\n&lt;scrjpt src=&quot;https:\/\/player.vimeo.com\/api\/player.js&quot;&gt;\n<\/pre><\/div>\n\n\n<p class=\"has-vivid-red-color has-text-color has-small-font-size\"><em>** letter <strong>i<\/strong> in <strong>script<\/strong> changed to <strong>j <\/strong>to disable response<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Note this gets rid of the persistent gap at the top and bottom!<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Audio\"><\/span>Audio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Self-hosted_sound_file\"><\/span>Self-hosted sound file<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-audio\"><audio controls src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/mona_lisa_harassment4.mp3\"><\/audio><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress\"><\/span>WordPress<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Easy: Host file in&nbsp;<strong>Media Library<\/strong>&nbsp;or&nbsp;a personal server, use&nbsp;<strong>Add Media button<\/strong>&nbsp;(classic editor) or Audio block (block editor) to insert.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<audio controls style=\"width: 100%;\">\n<source src=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/mona_lisa_harassment4.mp3\" type=\"audio\/mpeg\">\nYour browser does not support the audio element.\n<\/audio>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_responsive_width\"><\/span>Code, responsive width<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Simple coding task using the&nbsp;<code><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;audio&gt;<\/mark><\/strong><\/code>&nbsp;element to auto-generate a player control<\/li>\n\n\n\n<li>Add inline&nbsp;<code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>width<\/strong><\/mark><\/code> style&nbsp;in the tag for a responsive width:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [1]; title: ; notranslate\" title=\"\">\n&lt;audio controls style=&quot;width: 100%;&quot;&gt;\n&lt;source src=&quot;https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/mona_lisa_harassment4.mp3&quot; type=&quot;audio\/mpeg&quot;&gt;\nYour browser does not support the audio element\n&lt;\/audio&gt;\n<\/pre><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hosted_music_or_podcast\"><\/span>Hosted music or podcast<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-rich is-provider-soundcloud wp-block-embed-soundcloud\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Tangent Dumbo Loop for the sound of flyspec by williamcromar\" width=\"1024\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https:\/\/w.soundcloud.com\/player\/?visual=true&#038;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F176086400&#038;show_artwork=true&#038;maxheight=1000&#038;maxwidth=1024\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_Soundcloud_hosted\"><\/span>WordPress, Soundcloud hosted<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the URL and paste it into a post. <\/li>\n\n\n\n<li>Most modern WordPress themes will automatically create a responsive embed this way \u2014 if not, try a code-based solution.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"166\" scrolling=\"no\" frameborder=\"no\" allow=\"autoplay\" src=\"https:\/\/w.soundcloud.com\/player\/?url=https%3A\/\/api.soundcloud.com\/tracks\/176086400&#038;color=%23847c74&#038;auto_play=false&#038;hide_related=false&#038;show_comments=true&#038;show_user=true&#038;show_reposts=false&#038;show_teaser=true\"><\/iframe><div style=\"font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;\"><a href=\"https:\/\/soundcloud.com\/williamcromar\" title=\"williamcromar\" target=\"_blank\" style=\"color: #cccccc; text-decoration: none;\" rel=\"noopener\">williamcromar<\/a> <a href=\"https:\/\/soundcloud.com\/williamcromar\/tangent-dumbo-loop-for-the-sound-of-flyspec\" title=\"Tangent Dumbo Loop for the sound of flyspec\" target=\"_blank\" style=\"color: #cccccc; text-decoration: none;\" rel=\"noopener\">Tangent Dumbo Loop for the sound of flyspec<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Code_Soundcloud_hosted_minimal_chrome\"><\/span>Code, Soundcloud hosted, minimal chrome<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use SoundCloud&nbsp;<strong>Share icon<\/strong>&nbsp;to generate, copy, and paste iframe into your html<\/li>\n\n\n\n<li>Customize&nbsp;<strong>width<\/strong>&nbsp;to generate a responsive embed:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [1]; title: ; notranslate\" title=\"\">\n&lt;iframe width=&quot;100%&quot; height=&quot;166&quot; scrolling=&quot;no&quot; frameborder=&quot;no&quot; allow=&quot;autoplay&quot; src=&quot;https:\/\/w.soundcloud.com\/player\/?url=https%3A\/\/api.soundcloud.com\/tracks\/176086400&amp;color=%23847c74&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;show_teaser=true&quot;&gt;&lt;\/iframe&gt;\n&lt;div style=&quot;font-size: 10px; color: #cccccc; line-break: anywhere; word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;&quot;&gt;\n&lt;a href=&quot;https:\/\/soundcloud.com\/williamcromar&quot; title=&quot;williamcromar&quot; target=&quot;_blank&quot; style=&quot;color: #cccccc; text-decoration: none;&quot;&gt;williamcromar&lt;\/a&gt;\n&lt;a href=&quot;https:\/\/soundcloud.com\/williamcromar\/tangent-dumbo-loop-for-the-sound-of-flyspec&quot; title=&quot;Tangent Dumbo Loop for the sound of flyspec&quot; target=&quot;_blank&quot; style=&quot;color: #cccccc; text-decoration: none;&quot;&gt;Tangent Dumbo Loop for the sound of flyspec&lt;\/a&gt;\n&lt;\/div&gt;\n<\/pre><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Slide_decks\"><\/span>Slide decks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Google_Slides\"><\/span>Google Slides<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vS1913cOh-KjNaoukEuyLatTn8hthiNT3ucVtbEWJXYnoMy622fwHbRCeuhXYQK60D8gQ2vobTRIuRu\/embed?start=false&#038;loop=false\" frameborder=\"0\" width=\"400\" height=\"400\" allowfullscreen=\"true\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Google_Slides_fixed_size_pseudo-responsive\"><\/span>Google Slides, fixed size (pseudo-responsive)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For <strong>WordPress<\/strong>, use the code below in the Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>In Slides browser menu, select <strong>File &gt; Publish to Web<\/strong>, and in the dialog, choose Embed<\/li>\n\n\n\n<li>Customize <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong> and <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>height<\/code><\/mark><\/strong> if desired, and if no auto-advance is wanted, delete <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>&amp;delayms=3000<\/code><\/mark><\/strong>:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe src=&quot;https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vS1913cOh-KjNaoukEuyLatTn8hthiNT3ucVtbEWJXYnoMy622fwHbRCeuhXYQK60D8gQ2vobTRIuRu\/embed?start=false&amp;loop=false&amp;delayms=3000&quot; frameborder=&quot;0&quot; width=&quot;960&quot; height=&quot;569&quot; allowfullscreen=&quot;true&quot; mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot;&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Note: in our sample, we changed the default width and height values to 400 pixels each. The width <strong>will change<\/strong> if the width of the div holding the embed is smaller than 400 \u2014 but it will never get wider than 400 if the div is larger.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style>\n.container-slide {\n   position: relative;\n   aspect-ratio: 16 \/ 9;\n   overflow: hidden;\n}\n.responsive-slide {\n    border: 0;\n    position: absolute;\n    top: 0;\n    left: 2px;\n    width: 100%;\n    height: 100%;\n  }\n<\/style>\n\n<div class=\"container-slide\">\n<iframe class=\"responsive-slide\" src=\"https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vS1913cOh-KjNaoukEuyLatTn8hthiNT3ucVtbEWJXYnoMy622fwHbRCeuhXYQK60D8gQ2vobTRIuRu\/embed?start=true&#038;loop=true&#038;rm=minimal&#038;delayms=5000\"><\/iframe>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Google_Slides_responsive_looping_no_controls\"><\/span>Google Slides, responsive, looping, no controls<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>In Slides browser menu, select <strong>File &gt; Publish to Web<\/strong>, and in the dialog, choose Embed <\/li>\n\n\n\n<li>Add a variety of functions to the generated iframe code, such as auto-start (add&nbsp;<strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">start=false<\/mark><\/code><\/strong>), looping (add&nbsp;<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>loop=true<\/code><\/mark><\/strong>), and removing controls and branding (add&nbsp;<strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">rm=minimal<\/mark><\/code><\/strong>) in the basic iframe code above: don&#8217;t forget the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&amp;<\/mark><\/code><\/strong> between each function<\/li>\n\n\n\n<li>Customize the auto-advance <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>delayms=<\/code><\/mark><\/strong> to desired time in milliseconds: <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>1000<\/code><\/mark><\/strong> = 1 second<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe src=&quot;https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vS1913cOh-KjNaoukEuyLatTn8hthiNT3ucVtbEWJXYnoMy622fwHbRCeuhXYQK60D8gQ2vobTRIuRu\/embed?start=true&amp;loop=true&amp;rm=minimal&amp;delayms=5000&quot; frameborder=&quot;0&quot; width=&quot;960&quot; height=&quot;569&quot; allowfullscreen=&quot;true&quot; mozallowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot;&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>To make responsive, first remove the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong>, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code><strong>height<\/strong><\/code><\/mark>, and <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">fullscreen<\/mark><\/code><\/strong> parameters from the iframe<\/li>\n\n\n\n<li>Add the following CSS to your html (you can add as classes in the head as shown or style inline):<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n.container-slide {\n   position: relative;\n   aspect-ratio: 16 \/ 9;\n   overflow: hidden;\n}\n.responsive-slide {\n    border: 0;\n    position: absolute;\n    top: 0;\n    left: 2px;\n    width: 100%;\n    height: 100%;\n  }\n&lt;\/style&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li>Wrap the iframe inside a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong><code>&lt;div&gt;<\/code><\/strong><\/mark> with the <code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><strong>container-slide<\/strong><\/mark><\/code> class applied, and assign the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">responsive-slide<\/mark><\/code><\/strong> class to the iframe<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div class=&quot;container-slide&quot;&gt;\n&lt;iframe class=&quot;responsive-slide&quot; src=&quot;https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vS1913cOh-KjNaoukEuyLatTn8hthiNT3ucVtbEWJXYnoMy622fwHbRCeuhXYQK60D8gQ2vobTRIuRu\/embed?start=true&amp;loop=true&amp;rm=minimal&amp;delayms=5000&quot;&gt;&lt;\/iframe&gt;\n&lt;\/div&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em><strong>Why <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\"><code>left: 2px;<\/code><\/mark> in the code?<\/strong><\/em><\/p>\n\n\n\n<p><em>Applying the 16\/9 aspect ratio is easy, but the browser must render in whole numbers of pixels. This can lead to an unsightly black edge on the right side. Nudging the embed with a &#8220;pixel shim&#8221; eliminates that! Mileage may vary: tweak the value as needed in your context.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Powerpoint\"><\/span>Powerpoint<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/pennstateoffice365-my.sharepoint.com\/:p:\/g\/personal\/wrc11_psu_edu\/EeEr1__jNKtFrWMj4V-4h4YBHXXvAHwOLJr_dcfh33-Tpw?e=nujlyr&amp;action=embedview&amp;wdAr=1.7777777777777777\" width=\"100%\" height=\"270px\" frameborder=\"1px\">\nThis is an embedded <a target=\"_blank\" href=\"https:\/\/office.com\" rel=\"noopener\">Microsoft Office<\/a> presentation, powered by <a target=\"_blank\" href=\"https:\/\/office.com\/webapps\" rel=\"noopener\">Office<\/a>.<\/iframe>\n\n\n\n<p class=\"has-small-font-size\"><em>You may not be able to view this if you don&#8217;t go to my school, even though I&#8217;ve &#8220;shared&#8221; it with &#8220;anyone&#8221;<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Powerpoint_fixed_size\"><\/span>Powerpoint, fixed size<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>The best method for embedding a Powerpoint? Don&#8217;t bother. Use Google Slides. In the first embed, you may be required to sign in, even if &#8220;anyone&#8221; has been correctly set in share settings. All the&nbsp;<a href=\"https:\/\/samuelmcneill.com\/2017\/11\/02\/how-to-publicly-embed-onedrive-for-business-documents\/\" target=\"_blank\" rel=\"noreferrer noopener\">advice (2017)<\/a> and <a href=\"https:\/\/answers.microsoft.com\/en-us\/msoffice\/forum\/all\/embed-powerpoint-in-an-iframe-to-view-all-users\/69fbf972-b116-42f8-9771-5202a0c41cf8\" target=\"_blank\" rel=\"noreferrer noopener\">workarounds (2021)<\/a> in the world won&#8217;t solve this issue if your IT administrators restrict Office file sharing.&nbsp;Powerpoint Online is a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Closed_platform\" target=\"_blank\" rel=\"noreferrer noopener\">walled garden<\/a>.&nbsp;<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/presentation\/d\/e\/2PACX-1vRw9SPWZ59-aXJoO7fJDY3d2Fudm9ZwWuRUIb3pUGKNTmgPjqepg52Tj-uaFAEzIQ\/embed?start=false&#038;loop=false&#038;delayms=3000\" frameborder=\"0\" width=\"100%\" height=\"270\" allowfullscreen=\"true\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n\n\n\n<p class=\"has-small-font-size\"><em>This cost me precious Google Drive storage! You&#8217;re welcome.<\/em><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>If you <strong>must insist<\/strong> on embedding a Powerpoint, download the file, then upload it to Google Drive to share as per the instructions for embedding Google Slides. Some functionality may get lost, and it costs storage in Google Drive, whereas a native Google Slides file does not.<\/p>\n\n\n\n<p><em>Just creating a slide deck in Google Slides is the better option!<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adobe_Express\"><\/span>Adobe Express<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"has-vivid-red-color has-text-color has-link-color wp-elements-34a06d393cd9376e487d337cb031185e\"><strong><em>NOTE: Adobe Express has been a moving target in the past couple of years. Embedding, a core feature of the last iteration of Express, appears to be an afterthought in the current implementation. Current recommendation is to download the Express file and host it elsewhere (for example, if a video, host on YouTube or Vimeo. <\/em><\/strong>The legacy instructions are kept below as a placeholder until this multi-billion-dollar software corporation can get its act together. Weirdly, the old legacy file embed located on Adobe servers still functions perfectly.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/express.adobe.com\/video\/qrxyUaupggl1y\/embed\" width=\"270\" height=\"152\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adobe_Express_fixed_size\"><\/span>Adobe Express, fixed size<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>Copy and paste embed code available at the Express site into your html <\/li>\n\n\n\n<li>Customize <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong> and <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">height<\/mark><\/code><\/strong> if desired:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe src=&quot;https:\/\/express.adobe.com\/video\/qrxyUaupggl1y\/embed&quot; width=&quot;270&quot; height=&quot;152&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>This player can be made responsive by using the CSS technique seen at <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Responsive_looping_no_controls\">Google Slides Responsive, looping, no controls<\/a><\/strong> above.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3D_models_and_interactives\"><\/span>3D models and interactives<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Models\"><\/span>Models<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe allowfullscreen width=\"100%\" height=\"270\" loading=\"lazy\" frameborder=\"0\" src=\"https:\/\/p3d.in\/e\/fKidL+spin\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"p3D_hosted_pseudo-responsive\"><\/span>p3D hosted, pseudo-responsive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, p3D provides short-code options but they require a plug-in, so just use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>At your p3D model, open the dialog found at the <strong>Share<\/strong> icon, select <strong>Website\/Blog<\/strong>, and check <strong>&lt;iframe&gt; Embed Code<\/strong><\/li>\n\n\n\n<li>Customize&nbsp;<strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong>&nbsp;and&nbsp;<strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">height<\/mark><\/code><\/strong>&nbsp;if desired:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe allowfullscreen width=&quot;100%&quot; height=&quot;270&quot; loading=&quot;lazy&quot; frameborder=&quot;0&quot; src=&quot;https:\/\/p3d.in\/e\/fKidL+spin&quot;&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Setting the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong> at 100% makes the embed pseudo-responsive. Make it fully responsive by using the CSS technique seen at <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Responsive_looping_no_controls\">Google Slides Responsive, looping, no controls<\/a><\/strong> above.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/mypsu5858.autodesk360.com\/shares\/public\/SH286ddQT78850c0d8a4190f4f54a0a6b822?mode=embed\" width=\"100%\" height=\"400\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\"  frameborder=\"0\">\n<p>Your browser does not support iframes.<\/p>\n<\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Fusion_360_pseudo-responsive_scaled_UI\"><\/span>Fusion 360, pseudo-responsive, scaled UI<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>Open the&nbsp;<a href=\"https:\/\/myhub.autodesk360.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fusion 360 model<\/a>&nbsp;available online, find the <strong>Share<\/strong> icon, then&nbsp;copy and paste embed into your html <\/li>\n\n\n\n<li>Change <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong> to 100% for pseudo-responsiveness, and tweak the&nbsp;<strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">height<\/mark><\/code><\/strong>&nbsp;parameter as desired:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe src=&quot;https:\/\/myhub.autodesk360.com\/ue2d86514\/shares\/public\/SH919a0QTf3c32634dcf9517b3555d85ea40?mode=embed&quot; width=&quot;100%&quot; height=&quot;400&quot; allowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; mozallowfullscreen=&quot;true&quot;  frameborder=&quot;0&quot;&gt;\n&lt;p&gt;Your browser does not support iframes.&lt;\/p&gt;\n&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style>\n.container-autodesk {\n    width: 200%;\n    display: inline-block;\n    position: relative;\n    overflow: hidden;\n}\n.auto-scale-autodesk {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n}\n.auto-scale-autodesk>iframe {\n    width: 100%;\n    height: 100%;\n}\n<\/style>\n<div class=\"container-autodesk\">\n  <div class=\"auto-scale-autodesk\">\n<iframe loading=\"lazy\" src=\"https:\/\/mypsu5858.autodesk360.com\/shares\/public\/SH286ddQT78850c0d8a4190f4f54a0a6b822?mode=embed\" width=\"100%\" height=\"400\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\"  frameborder=\"0\" style=\"width:200%; height:800px;\n-moz-transform: scale(0.5, 0.5); \n-webkit-transform: scale(0.5, 0.5); \n-o-transform: scale(0.5, 0.5);\n-ms-transform: scale(0.5, 0.5);\ntransform: scale(0.5, 0.5); \n-moz-transform-origin: top left;\n-webkit-transform-origin: top left;\n-o-transform-origin: top left;\n-ms-transform-origin: top left;\ntransform-origin: top left;\noverflow: hidden;\">\n<p>Your browser does not support iframes.<\/p>\n<\/iframe>\n<\/div>\n  <div style=\"padding-top: 400px;\"><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">I really hate Autodesk&#8217;s embed<\/mark><\/strong>. You can&#8217;t help but notice their <strong>terrible, <em>arrogantly<\/em>  out-of-scale intrusive user interface!<\/strong> <\/p>\n\n\n\n<p>I created a hacky but simple workaround below, which you can see live at <strong><a href=\"https:\/\/codepen.io\/williamCromar\/pen\/vYdqeRE\" target=\"_blank\" rel=\"noreferrer noopener\">CodePen<\/a><\/strong>. Add all <strong>the code highlighted below<\/strong> to the basic&nbsp;iframe, and tweak width, height, and  padding-top parameters as needed in your coding context:<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; highlight: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,24,25,26,27,28,29,30,31,32,33,34,35,38,39,40,41]; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n.container-autodesk {\n    width: 200%;\n    display: inline-block;\n    position: relative;\n    overflow: hidden;\n}\n.auto-scale-autodesk {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n}\n.auto-scale-autodesk&gt;iframe {\n    width: 100%;\n    height: 100%;\n}\n&lt;\/style&gt;\n\n&lt;div class=&quot;container-autodesk&quot;&gt;\n    &lt;div class=&quot;auto-scale-autodesk&quot;&gt;\n&lt;iframe src=&quot;https:\/\/myhub.autodesk360.com\/ue2d86514\/shares\/public\/SH919a0QTf3c32634dcf9517b3555d85ea40?mode=embed&quot; width=&quot;100%&quot; height=&quot;400&quot; allowfullscreen=&quot;true&quot; webkitallowfullscreen=&quot;true&quot; mozallowfullscreen=&quot;true&quot;  frameborder=&quot;0&quot; \nstyle=&quot;width:200%; height:800px;\n-moz-transform: scale(0.5, 0.5); \n-webkit-transform: scale(0.5, 0.5); \n-o-transform: scale(0.5, 0.5);\n-ms-transform: scale(0.5, 0.5);\ntransform: scale(0.5, 0.5); \n-moz-transform-origin: top left;\n-webkit-transform-origin: top left;\n-o-transform-origin: top left;\n-ms-transform-origin: top left;\ntransform-origin: top left;\noverflow: hidden;&quot;&gt;\n&lt;p&gt;Your browser does not support iframes.&lt;\/p&gt;\n&lt;\/iframe&gt;\n   &lt;\/div&gt;\n   &lt;div style=&quot;padding-top: 400px;&quot;&gt;\n   &lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Interactives\"><\/span>Interactives<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/williamcromar.com\/meme_n_to_ma_ga_m_or_i\/\" style=\"border: 0px #ffffff none;\" name=\"ambassador-skull\" scrolling=\"no\" frameborder=\"0\" height=\"400px\" width=\"100%\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"ThreeJS_interactive\"><\/span>ThreeJS interactive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>The ThreeJS interactive object is a website hosted at a personal server<\/li>\n\n\n\n<li>Code an <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;iframe&gt;<\/mark><\/code><\/strong> in this manner, using a <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">width<\/mark><\/code><\/strong> of 100% for pseudo-responsiveness:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe src=&quot;https:\/\/williamcromar.com\/meme_n_to_ma_ga_m_or_i\/&quot; style=&quot;border: 0px #ffffff none;&quot; name=&quot;ambassador-skull&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; height=&quot;400px&quot; width=&quot;100%&quot; allowfullscreen&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>Make this iframe fully responsive if desired by using the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">aspect-ratio<\/mark><\/code><\/strong> property as seen  in the next example, but it&#8217;s usually not necessary for this kind of interactive.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"aspect-ratio: 3 \/ 2; height: auto; width: 100%;\" src=\"https:\/\/williamcromar.com\/student_samples\/animate_alpha\/pro3.html\" style=\"border:0px #ffffff none;\" name=\"animate\" scrolling=\"no\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML5_animated_interactive\"><\/span>HTML5 animated interactive<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>The HTML5 interactive object is a website hosted at a personal server<\/li>\n\n\n\n<li>Code an <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">&lt;iframe&gt;<\/mark><\/code><\/strong> in this manner, using the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">aspect-ratio<\/mark><\/code><\/strong> property as seen in the inline style applied below:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;iframe style=&quot;aspect-ratio: 3 \/ 2; height: auto; width: 100%;&quot; src=&quot;https:\/\/williamcromar.com\/student_samples\/animate_alpha\/pro3.html&quot; style=&quot;border:0px #ffffff none;&quot; name=&quot;animate&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;\/iframe&gt;\n<\/pre><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>HTML5 interactives like this often use a <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">canvas<\/mark><\/code><\/strong> property with a defined aspect ratio, so a fully responsive solution is almost always desirable. This one has a 3\/2 ratio: tweak this to fit your context.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Publications\"><\/span>Publications<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"PDF\"><\/span>PDF<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe style=\"aspect-ratio: 16\/9; width: 100%; border:0px #ffffff none;\" src=\"https:\/\/williamcromar.com\/code_samples\/video_embed\/yumpu_responsive.html\" name=\"vimeoiframe\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0px\" marginwidth=\"0px\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Yumpu_hosted_flipbook\"><\/span>Yumpu hosted flipbook<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>In <strong>WordPress<\/strong>, use code below in Text tab (classic editor) or Custom HTML block (block editor)<\/li>\n\n\n\n<li>At the Yumpu page for the hosted PDF publication, find the Embed icon and generate a fixed or responsive &lt;iframe&gt; to copy and paste into html:<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n.embed-container {\n   position: relative;\n   aspect-ratio: 16 \/ 9; \n   height: 0;\n   overflow: hidden;\n   max-width: 100%;\n} \n.embed-container iframe, .embed-container object, .embed-container embed { \n   position: absolute;\n   top: 0;\n   left: 0;\n   width: 100%;\n   height: 100%;\n}\n&lt;\/style&gt;\n\n&lt;div class=&quot;embed-container&quot; data-page-width=&quot;500&quot; data-page-height=&quot;500&quot; id&quot;ypembedcontainer&quot;&gt;\n\t&lt;iframe   src=&quot;https:\/\/www.yumpu.com\/la\/embed\/view\/x3nCQaR4L2bKkATF&quot; frameborder=&quot;0&quot; allowfullscreen=&quot;true&quot;  allowtransparency=&quot;true&quot;&gt;&lt;\/iframe&gt;\n\t&lt;br&gt;\n\t&lt;a href=&quot;https:\/\/www.yumpu.com\/la\/document\/view\/63830940\/2018-cromar-tension-portfolio-pages&quot; title=&quot;2018_cromar_tension_portfolio_pages&quot; target=&quot;_blank&quot;&gt;2018_cromar_tension_portfolio_pages&lt;\/a&gt;\n&lt;\/div&gt;\n&lt;scrjpt src=&quot;https:\/\/players.yumpu.com\/modules\/embed\/yp_r_iframe.js&quot; &gt;\n&lt;\/scrjpt&gt;\n<\/pre><\/div>\n\n\n<p class=\"has-vivid-red-color has-text-color has-small-font-size\"><em>** letter <strong>i<\/strong> in <strong>script<\/strong> changed to <strong>j <\/strong>to disable response<\/em><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><em>The auto-generated code from <strong>Yumpu<\/strong> comes with some issues: attributes come with single quotes where they should be double, responsiveness is not created with the <strong><code><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">aspect-ratio<\/mark><\/code><\/strong> property, etc. The code you see above has been cleaned up to reflect better form, and it&#8217;s advisable to follow that practice!<\/em><\/p>\n\n\n\n<p><em>E-publishers like <strong>Yumpu<\/strong> or <strong>Issuu<\/strong> have a freemium-level account that generates a popup ad (which you can see here). At Yumpu, the upgrade to avoid this is free for 30 days, then a whopping $20\/mo as of this writing. The ad disappears after a few clicks. So if using in a presentation, click on pages beforehand until the ad clears.<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/TRANSMEDIA-NARRATIVES.pdf\" type=\"application\/pdf\" style=\"width:100%;height:600px\" aria-label=\"Embed of TRANSMEDIA-NARRATIVES.\"><\/object><a id=\"wp-block-file--media-d7132cd0-e90d-4476-9671-827aff900dba\" href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/TRANSMEDIA-NARRATIVES.pdf\">TRANSMEDIA-NARRATIVES<\/a><a href=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/TRANSMEDIA-NARRATIVES.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-d7132cd0-e90d-4476-9671-827aff900dba\">Download<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"WordPress_hosted_document\"><\/span><br>WordPress hosted document<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Upload a PDF file to the Media Library and then link to it in your post or page by using a File block in the block editor<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Cloud_documents\"><\/span>Cloud documents<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column has-background is-layout-flow wp-block-column-is-layout-flow\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<iframe loading=\"lazy\" src=\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vTjixZFcAT-douQDGg0vS_BDpMqMiBVLSmhUblwT64-XR8SrAwomC0_jd8ePT_mhOkir5xGvtOd5_1Y\/pubhtml?widget=true&amp;headers=false\" width=\"100%\" height=\"368px;\"><\/iframe>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Google_Docs_Sheets_or_Forms\"><\/span>Google Docs, Sheets, or Forms<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Follow instructions above for <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Google_Slides\">Google Slides<\/a><\/strong><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#eeeeee\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center\" style=\"font-size:100px\">\u2620\ufe0f<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Word_Excel_or_Microsoft_Forms\"><\/span>Word, Excel, or Microsoft Forms<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>For the same reasons cited above for <strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Powerpoint\">Powerpoint<\/a><\/strong>, don&#8217;t waste your time. Use&nbsp;<strong><a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#Google_Docs_Sheets_or_Forms\">Google Docs, Sheets, or Forms<\/a><\/strong>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is a library of methods for embedding various media into WordPress or hand-coded websites, with an emphasis on responsive design. Updated to include the new aspect-ratio CSS property&#8230; no more hacky padding! In the WordPress ecosystem, some plug-ins provide functionality, but over-reliance on plug-ins can lead to trouble. With a little code, you can&#8230; <a href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/\">read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"class_list":["post-748","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Embeds - newMediaWiki<\/title>\n<meta name=\"description\" content=\"Embeds: library of techniques for images, video, audio, slideshows, 3D models, interactives, and publications, featuring aspect-ratio CSS\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embeds - newMediaWiki\" \/>\n<meta property=\"og:description\" content=\"Embeds: library of techniques for images, video, audio, slideshows, 3D models, interactives, and publications, featuring aspect-ratio CSS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/williamcromar.com\/newmediawiki\/embeds\/\" \/>\n<meta property=\"og:site_name\" content=\"newMediaWiki\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T13:02:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"801\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/\",\"name\":\"Embeds - newMediaWiki\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/72.183.jpg\",\"datePublished\":\"2023-08-01T13:43:04+00:00\",\"dateModified\":\"2025-08-07T13:02:50+00:00\",\"description\":\"Embeds: library of techniques for images, video, audio, slideshows, 3D models, interactives, and publications, featuring aspect-ratio CSS\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/#primaryimage\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/72.183.jpg\",\"contentUrl\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/72.183.jpg\",\"width\":801,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/embeds\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embeds\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#website\",\"url\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/\",\"name\":\"newMediaWiki\",\"description\":\"because all media are new\",\"publisher\":{\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/williamcromar.com\\\/newmediawiki\\\/#\\\/schema\\\/person\\\/680114553d8ae86ba751ea5e0ea983e3\",\"name\":\"williamCromar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\",\"width\":1754,\"height\":1754,\"caption\":\"williamCromar\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/williamcromar.com\\\/newmediawiki\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embeds - newMediaWiki","description":"Embeds: library of techniques for images, video, audio, slideshows, 3D models, interactives, and publications, featuring aspect-ratio CSS","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/","og_locale":"en_US","og_type":"article","og_title":"Embeds - newMediaWiki","og_description":"Embeds: library of techniques for images, video, audio, slideshows, 3D models, interactives, and publications, featuring aspect-ratio CSS","og_url":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/","og_site_name":"newMediaWiki","article_modified_time":"2025-08-07T13:02:50+00:00","og_image":[{"width":801,"height":1024,"url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/","url":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/","name":"Embeds - newMediaWiki","isPartOf":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#primaryimage"},"image":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#primaryimage"},"thumbnailUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg","datePublished":"2023-08-01T13:43:04+00:00","dateModified":"2025-08-07T13:02:50+00:00","description":"Embeds: library of techniques for images, video, audio, slideshows, 3D models, interactives, and publications, featuring aspect-ratio CSS","breadcrumb":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/williamcromar.com\/newmediawiki\/embeds\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#primaryimage","url":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg","contentUrl":"https:\/\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/72.183.jpg","width":801,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/williamcromar.com\/newmediawiki\/embeds\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/williamcromar.com\/newmediawiki\/"},{"@type":"ListItem","position":2,"name":"Embeds"}]},{"@type":"WebSite","@id":"https:\/\/williamcromar.com\/newmediawiki\/#website","url":"https:\/\/williamcromar.com\/newmediawiki\/","name":"newMediaWiki","description":"because all media are new","publisher":{"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/williamcromar.com\/newmediawiki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/williamcromar.com\/newmediawiki\/#\/schema\/person\/680114553d8ae86ba751ea5e0ea983e3","name":"williamCromar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","url":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","contentUrl":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1","width":1754,"height":1754,"caption":"williamCromar"},"logo":{"@id":"https:\/\/i0.wp.com\/williamcromar.com\/newmediawiki\/wp-content\/uploads\/2023\/07\/2015_newmedia_logo.png?fit=1754%2C1754&ssl=1"}}]}},"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/pages\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":20,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/pages\/748\/revisions"}],"predecessor-version":[{"id":9286,"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/pages\/748\/revisions\/9286"}],"wp:attachment":[{"href":"https:\/\/williamcromar.com\/newmediawiki\/wp-json\/wp\/v2\/media?parent=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}