Embeds

WordPress, responsive

Most modern WordPress themes will create a responsive image for you that will change size for specific device display.

• Select a Flickr image
• Select Share photo icon: the curved arrow at the lower right of image
• Select Share and copy the URL
• Paste on its own line in a post to automatically create a responsive Flickr embed

Code, fixed size

• Select a Flickr image
• Select Share photo icon
• Select Embed, choose size, and copy code
• Paste into html for your page
• Customize width="XXX" and height="YYY" if desired:

<a data-flickr-embed="true" data-context="true" href="https://www.flickr.com/photos/williamcromar/52805942069/in/album-72177720315295622/" title="Kirkton of Aboyne"><img src="https://live.staticflickr.com/65535/52805942069_1468e103d1_c.jpg" width="800" height="601" alt="Kirkton of Aboyne"/></a>
<!--Delete the scrjpt:-->
<scrjpt async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></scrjpt>

** letter i in script changed to j to disable response

Code, responsive

• Select a Flickr image
• Select Share photo icon
• Select Embed, choose large or original size, and copy code
• Delete width and height parameters, and delete the entire script
• Create the following CSS in the head of the html:

• Create a new <div> around the <img>, and apply class container to the <div> and class imgscale to <img>:

• This breaks the link back to Flickr, but their terms of service require a link. To fix, delete data-flickr-embed="true" and add target="_blank"

Code, fixed size

• Open Flickr album
• Select the Share album icon on the album page: the curved arrow under the album title
• Select Embed, select a size, and copy the code
• Paste into HTML for your page
• Customize width="XXX" and height="YYY" if desired:

<a data-flickr-embed="true" href="https://www.flickr.com/photos/williamcromar/albums/72157695032282922" title="3dModelingElements">
<img src="https://live.staticflickr.com/1802/42921015881_53f3fcea37_z.jpg" width="270" height="180" alt="3dModelingElements"/>
</a>
<!--Delete the scrjpt:-->
<scrjpt async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></scrjpt>

** letter i in script changed to j to disable response

Code, responsive

• Select a Flickr album.
• Note and copy the unique identifier for the album – the numbers at the end of the URL as in this example: https://www.flickr.com/photos/williamcromar/albums/72157695032282922
• Copy and paste the number only into this iframe code (between photosets/ and the closing " in the src:

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 embedr.flickr.com will work…

WordPress, responsive

• Can host directly in Media Library, just insert as you would any other image — but using Thumbnail or Medium will disable any animation
• Themes often take care of image responsiveness automatically. If not use the code solution below.

Image source »

Code, responsive

• Place <img> in your HTML then add inline style for width, height, and aspect-ratio properties as per example:

• If limiting image size is desired to avoid over-scaling in a responsive context, use the max-width property:

Inline style can of course be added as a class to the html head or a css file if flexibility of use is desired.

Why the “2.01” in the aspect ratio?

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.

Self-hosted, responsive

• Upload a video to a personal server
• Place the URL for the video in the src of a <video> tag
• Place the <video> tag inside a <div>
• Style the div and video as you see in the code below
• Include a variety of video parameters, such as no-controls, autoplay, muted, or loop, to give you or the client a range of control over the look and play
• The inline styles can be changed to classes in the head of the HTML if desired.

Autoplay in audio and video should be used sparingly. It’s good for creating an active hero image, for example.

WordPress using Vimeo or YouTube URL

• Copy the video URL and paste it into the post.
• Most modern WordPress themes will automatically create a responsive video this way — if not, try a code-based solution.

Note the UI chrome in this embed from Vimeo, where Settings control the parameters — not the code — so you can get a minimalist solution this way.

For YouTube, not so much — you have to use the YouTube API to set parameters in code. YouTube allows much less control than Vimeo here.

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.

Code using generated iframe, responsive

• Go to the video at the hosting site and hit the Share button, then find an embed generator
• At YouTube, you’ll have to add CSS the same way we did for a Flickr single image using the responsive code above.
• At Vimeo, shown here, you can select a responsive option in the embed generator, then copy the code and paste it into your HTML:

<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/111212129?h=d4ab8d73e3&title=0&byline=0&portrait=0" style="position:absolute; top:0; left:0; width:100%; height:100%;" frameborder="0" allow="fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<scrjpt src="https://player.vimeo.com/api/player.js">

** letter i in script changed to j to disable response

Note this gets rid of the persistent gap at the top and bottom!

Code, responsive width

• Simple coding task using the <audio> element to auto-generate a player control
• Add inline width style in the tag for a responsive width:

WordPress, Soundcloud hosted

• Copy the URL and paste it into a post.
• Most modern WordPress themes will automatically create a responsive embed this way — if not, try a code-based solution.

Code, Soundcloud hosted, minimal chrome

• Use SoundCloud Share icon to generate, copy, and paste iframe into your html
• Customize width to generate a responsive embed:

Google Slides, fixed size (pseudo-responsive)

• For WordPress, use the code below in the Text tab (classic editor) or Custom HTML block (block editor)
• In Slides browser menu, select File > Publish to Web, and in the dialog, choose Embed
• Customize width and height if desired, and if no auto-advance is wanted, delete &delayms=3000:

Note: in our sample, we changed the default width and height values to 400 pixels each. The width will change if the width of the div holding the embed is smaller than 400 — but it will never get wider than 400 if the div is larger.

Google Slides, responsive, looping, no controls

• In WordPress, use code below in Text tab (classic editor) or Custom HTML block (block editor)
• In Slides browser menu, select File > Publish to Web, and in the dialog, choose Embed
• Add a variety of functions to the generated iframe code, such as auto-start (add start=false), looping (add loop=true), and removing controls and branding (add rm=minimal) in the basic iframe code above: don’t forget the & between each function
• Customize the auto-advance delayms= to desired time in milliseconds: 1000 = 1 second

• To make responsive, first remove the width, height, and fullscreen parameters from the iframe
• Add the following CSS to your html (you can add as classes in the head as shown or style inline):

• Wrap the iframe inside a <div> with the container-slide class applied, and assign the responsive-slide class to the iframe

Why left: 2px; in the code?

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 “pixel shim” eliminates that! Mileage may vary: tweak the value as needed in your context.

You may not be able to view this if you don’t go to my school, even though I’ve “shared” it with “anyone”

Powerpoint, fixed size

The best method for embedding a Powerpoint? Don’t bother. Use Google Slides. In the first embed, you may be required to sign in, even if “anyone” has been correctly set in share settings. All the advice (2017) and workarounds (2021) in the world won’t solve this issue if your IT administrators restrict Office file sharing. Powerpoint Online is a walled garden. 

This cost me precious Google Drive storage! You’re welcome.

If you must insist 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.

Just creating a slide deck in Google Slides is the better option!

Adobe Express, fixed size

• In WordPress, use code below in Text tab (classic editor) or Custom HTML block (block editor)
• Copy and paste embed code available at the Express site into your html
• Customize width and height if desired:

This player can be made responsive by using the CSS technique seen at Google Slides Responsive, looping, no controls above.

p3D hosted, pseudo-responsive

• In WordPress, 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)
• At your p3D model, open the dialog found at the Share icon, select Website/Blog, and check <iframe> Embed Code
• Customize width and height if desired:

Setting the width at 100% makes the embed pseudo-responsive. Make it fully responsive by using the CSS technique seen at Google Slides Responsive, looping, no controls above.

Fusion 360, pseudo-responsive, scaled UI

• In WordPress, use code below in Text tab (classic editor) or Custom HTML block (block editor)
• Open the Fusion 360 model available online, find the Share icon, then copy and paste embed into your html
• Change width to 100% for pseudo-responsiveness, and tweak the height parameter as desired:

I really hate Autodesk’s embed. You can’t help but notice their terrible, arrogantly out-of-scale intrusive user interface!

I created a hacky but simple workaround below, which you can see live at CodePen. Add all the code highlighted below to the basic iframe, and tweak width, height, and padding-top parameters as needed in your coding context:

ThreeJS interactive

• In WordPress, use code below in Text tab (classic editor) or Custom HTML block (block editor)
• The ThreeJS interactive object is a website hosted at a personal server
• Code an <iframe> in this manner, using a width of 100% for pseudo-responsiveness:

Make this iframe fully responsive if desired by using the aspect-ratio property as seen in the next example, but it’s usually not necessary for this kind of interactive.

HTML5 animated interactive

• In WordPress, use code below in Text tab (classic editor) or Custom HTML block (block editor)
• The HTML5 interactive object is a website hosted at a personal server
• Code an <iframe> in this manner, using the aspect-ratio property as seen in the inline style applied below:

HTML5 interactives like this often use a canvas 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.

Yumpu hosted flipbook

• In WordPress, use code below in Text tab (classic editor) or Custom HTML block (block editor)
• At the Yumpu page for the hosted PDF publication, find the Embed icon and generate a fixed or responsive <iframe> to copy and paste into html:

<style>
.embed-container {
   position: relative;
   aspect-ratio: 16 / 9; 
   height: 0;
   overflow: hidden;
   max-width: 100%;
} 
.embed-container iframe, .embed-container object, .embed-container embed { 
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>

<div class="embed-container" data-page-width="500" data-page-height="500" id"ypembedcontainer">
	<iframe   src="https://www.yumpu.com/la/embed/view/x3nCQaR4L2bKkATF" frameborder="0" allowfullscreen="true"  allowtransparency="true"></iframe>
	<br>
	<a href="https://www.yumpu.com/la/document/view/63830940/2018-cromar-tension-portfolio-pages" title="2018_cromar_tension_portfolio_pages" target="_blank">2018_cromar_tension_portfolio_pages</a>
</div>
<scrjpt src="https://players.yumpu.com/modules/embed/yp_r_iframe.js" >
</scrjpt>

** letter i in script changed to j to disable response

The auto-generated code from Yumpu comes with some issues: attributes come with single quotes where they should be double, responsiveness is not created with the aspect-ratio property, etc. The code you see above has been cleaned up to reflect better form, and it’s advisable to follow that practice!

E-publishers like Yumpu or Issuu 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.

WordPress hosted document

• 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

Google Docs, Sheets, or Forms

• Follow instructions above for Google Slides