![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
dreamwidth embeds
May. 6th, 2024 05:17 amintroduction
so juice dm-ed me asking how i embedded google slides and pdfs and whatnot in previous posts. actually i only embedded google slides and google docs back then but with 2 more years of cs degree under my belt i guess i am now able to hack pdf embeds too. yay! but dreamwidth is weird about embeds so here is me trying to bridge the gap between dreamwidth's one-paragraph outdated explanation and the actual functionality within dreamwidth's supported html.
the basics
if there is a way to acquire embed code through the site which hosts the media (usually found within 'share' or 'publish' options), copy this embed code. in your dreamwidth post editor (the html tab specifically), click the 'embed media' button. paste the embed code and select 'insert.' if this does not work, try the following:
<site-embed>
<embed src="[your link*]" width="[width of embed**]" height="[height of embed**]">
</embed>
</site-embed>
* there is more than one link that can be placed here. i recommend you try the links available to you in the following order, until one works: a) the embed link*** (the link to the media within the embed code), b) the share link (if there is such a thing on the host site), c) the normal link (straight from your browser).
** the width and height of the embed can be delineated in pixels (recommended: width="960" height="569") or in percentage (such as: width="100%" height="100%"). there are other variables we can specify within the embed tag, as well as some variables specific to certain sites/links, which we will get into in things dreamwidth won't tell u about embeds.
*** some easy browser link >> embed link conversions for your convenience ([id] will be a string of characters unique to that piece of media):
| host site | browser link | embed link |
|---|---|---|
| pdf (google drive) | https://drive.google.com/file/d/[id]/view | https://drive.google.com/file/d/[id]/preview |
| youtube | https://www.youtube.com/watch?v=[id] | https://www.youtube.com/embed?v=[id] |
| spotify (track) | https://open.spotify.com/track/[id] | https://open.spotify.com/embed/track/[id] |
| spotify (playlist) | https://open.spotify.com/playlist/[id] | https://open.spotify.com/embed/playlist/[id] |
note: occasionally, none of these embed options will work, and this would likely be an issue with the host site's policies, which i have yet to work around. unfortunately, ao3 is one of those host sites.
things dreamwidth won't tell u about embeds
so basically all dreamwidth gives us in terms of embed info is this set of instructions (currently slightly incorrect and nonfunctioning half the time) and this list of sites whitelisted for embedding (which does not encompass all sites that work, only the officially approved). first of all NOBODY CAN EVEN FIND THIS INFORMATION ON THE DREAMWIDTH SITE LMFAO. if these links were accessible and discoverable then juice wouldn't have needed to ask me anything because google slides actually does work with those instructions (if u ignore the part that's wrong). like technically u can find these links but it is NOT as easy as it should be. other info pages about dreamwidth's supported HTML are linked on the same page where you would write and edit an entry, but not this -- seems like an easy fix to me.
but whatever. there are variations to the basics code that i want to capture in detail here. we'll do this by going through some examples:
pdfs
embed code inserted using the 'Embed Media' button does not work for pdfs (and you would only have embed code if your pdf is uploaded to google drive). below is an example of embedding pdf files that have been uploaded to google drive:
<site-embed>
<embed src="https://drive.google.com/file/d/14JtcfqRp41S-xgBX4naLgqq6r_gGDcVd/preview" type="application/pdf" width="100%" height="100%">
</embed>
</site-embed>
there are some things to note here. firstly, the link used here is the link from the embed code, not the link straight from the browser (in this case the only difference between the two is the browser link ends with "view" instead of "preview"). secondly, here we see the introduction of the type attribute. the type attribute can be used to define the media type of the content in your link. i played around with it, and you don't really need it; it seems like the embed tag does some heavy lifting and can generally determine what you're giving it and figure itself out. that said, i've only tried a few filetypes. apparently there are so goddamn many media types so if you're having trouble getting an embed to work for a very specific media type, maybe try specifying using the 'Name' and 'Template' columns from that link ('Name' being the file type and the corresponding 'Template' being what to enter for the type attribute if embedding that file type).
we can also embed pdf files that have been publicly uploaded to other host sites online! here's an example:
<site-embed>
<embed src="https://egrcc.github.io/docs/math/all-of-statistics.pdf" type="application/pdf" width="100%" height="100%">
</embed>
</site-embed>
notably, the pdf features available online (such as the sidebar) are also available in the embedded form of this pdf.
important note on pdfs: gdrive pdf embeds are not viewable on mobile. however, pdf embeds of pdfs that have been published to the internet (such as the statistics one above) are able to be viewed on mobile.
google slides
let's look at how a presentation would be embedded into dreamwidth:
<site-embed>
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ2iIKxuw0SzeIQYqgLRUXm6ddIZ6BfLWgxOsXRARHzWsRYAJA8Sw2uIm1k_Ms7BXC5intgWthvEDrr/embed?start=false&loop=false" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
</iframe>
</site-embed>
so firstly i want to point out the end of the src link. the part where it says "embed?start=false&loop=false." the variable start is a toggle for autoplaying the slides. with start set to false, autoplay is off. the variable loop is a toggle for cycling through the slides again once the last slide is reached. with loop set to false, this looping is turned off. let's briefly look at a version where start and loop are toggled on:
<site-embed>
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ2iIKxuw0SzeIQYqgLRUXm6ddIZ6BfLWgxOsXRARHzWsRYAJA8Sw2uIm1k_Ms7BXC5intgWthvEDrr/embed?start=true&loop=true&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
</iframe>
</site-embed>
now we can see a new variable involved called delayms. this variable specifies how long each slide is shown for during autoplay, in milliseconds. right now it is set to 3000ms, which is 3 seconds. i played around with these three variables (start, loop, and delayms), and notably:
- if start is false, loop is effectively false regardless of the stated value in the link (and of course delayms is not used since autoplay is off).
- delayms can be omitted; if start is true but delayms is omitted, a default delayms of 3000 (3 seconds) is used
now we can discuss the attributes within iframe:
the attribute frameborder specifies whether to display a border around the embed -- as is common practice in CS, 1 is true and 0 is false, so in this case the current value of "0" will ensure there is no border around the embed.
the attributes width and height can be specified in pixels ("100" or "100px") or by percentage ("100%"). in this case, width and height have been set to 960 pixels and 569 pixels, respectively.
the attributes allowfullscreen, mozallowfullscreen, and webkitallowfullscreen are clearly related. allowfullscreen pretty much says what it does -- it allows the viewer to open the embed in a fullscreen view. mozallowfullscreen refers to mozilla firefox, and is specific to that browser. similarly, webkitallowfullscreen refers to webkit, which is another web browser engine which is primarily used by apple products. since web browsers operate and display websites in different ways, these options would allow specific format choices in different browsers. additionally, considering google is not specified the way mozilla and webkit are, it seems that the format choices decided in the allowfullscreen attribute would apply to google-based web browser engines.
that's all for now! :)
bonus
in case u were wondering how i wrote this post/how u can write ur own post about html....
to display raw html code in while in dreamwidth html format:
- replace any instances of "&" with:
