My blog.torontomu.ca reference | demo
Testing features, brainstorming
Most of the time, if you get a message that a Youtube video can’t be embedded, it’s because the content creator did not enable embedding when they released the video on Youtube. By default, this option is not checked.
This process appears to start out alright – but if you try to play the video, you get the message that the video is unavailable.
We try a few different ways of embedding Youtube videos, with varying degrees of success.
Youtube is one of the most common media types that the students embed into their blogs (although, as we get more embeddable things, this may change).
Here are a few tests.
I just wanted to include the link to the video I’m using, and the only way I could do it was to use a preformatted block! LOL.
https://www.youtube.com/watch?v=-17TliuArs8
This is actually really easy to use, because you don’t even have to select the Youtube embed block – or any block, for that matter. Just hit enter, to start a new block, and paste in the URL of the Youtube video. When you hit enter, WordPress will know that it is a Youtube URL and create a Youtube embed block out of it. Neat!
Note that some Youtube creators do not permit embedding on an external website – this is their choice, and not a problem with WordPress
This may or may not work for blog admins. Since this is inconsistent, I don’t recommend using this method for Youtube – especially when there is a better available option (above).
As a super admin, I can post the embed code and it will work – but blog admins, authors, etc. will have their code stripped by WordPress, for security purposes.
Here is the original embed code copied from Youtube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/-17TliuArs8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
I first added it using a “Super Admin” account, and it worked fine (with fullscreen options)
Next, I tried using a “Blog Administrator” account. Not only was the code stripped for the new video (below) BUT it stripped the code of the above video. Both play, but the fullscreen option does not work.
This is what the stripped code looks like:
<iframe width="560" height="315" src="https://www.youtube.com/embed/-17TliuArs8" frameborder="0">
Leverage Ryerson’s GSuite tools for media objects in your blog. Let’s see what works!
GSuite (Google for Education) offers a collection of tools that are great for creating and collaborating on content. Some of this work can even be embedded in a WordPress post or page! These tools are available to the Ryerson community via your my.ryerson login – so no separate account is required!
Google content can be divided into two categories: content created using a Google tool (a Google Doc, Google Slides, Google Drawing, Google Sheets) and third-party files uploaded to Google and viewed through a preview (audio and video files, Word documents, PDFs).
The embed methods are different for these two things. For now, I am focusing on the native Google tools. For the most part, this involves opening the Google content and, in the menu, going to File > “Publish to the web” and copying the embed code, which can be pasted into a “Custom HTML” WordPress block.
The following demos were completing by a user with an “Author” role in the blog, as a way to confirm that the embed code will still work mostly as expected by any content creator. The ability to display in full-screen is stripped out of the code. (Embed code from other applications is sometimes stripped for security reasons – this did not happen with the Google embed codes below).
Google Slides is like a stripped-down version of Powerpoint, and can be a great way to add content with a sequence, integrating images and text.
This is the sample Google Drawing used in this demo – it has been shared with the public, so it can be embedded here: https://docs.google.com/presentation/d/1-d8c3TJ34EyBDkSDuumUX8M8jofDZLdsJTuNbfsd3Xk/edit?usp=sharing
When editing your Google Slides, go to File (in the menu) > Publish to the web & get the embed code. I used the small size, 640 x 389, which fits the blog post size well.
Here is the code I got from Google:
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSuYz6WBYJ2Zg7VzQBXtjOpqsDhKkPUaXVn2gyUq62uhjOVyf5YoYS0mA_uOzV_Wnr4oo6LxH64aNUg/embed?<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSuYz6WBYJ2Zg7VzQBXtjOpqsDhKkPUaXVn2gyUq62uhjOVyf5YoYS0mA_uOzV_Wnr4oo6LxH64aNUg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>This code was then pasted into a Custom HTML block, below:
Note: I tested this both as a blog admin and an author (the usual role for students), and the embed code was not stripped by WordPress.
Google Drawings allows you to create basic visuals, using simple shapes, text, and colour.
This is the sample Google Drawing used in this demo – it has been shared with the public, so it can be embedded here: https://docs.google.com/drawings/d/1SUdJwNb15PPhpxIhFPQ75xa7PMVvnw0Qr6V8WKMCRd0/edit?usp=sharing
When editing your Google Drawing, go to File (in the menu) > Publish to the web & get the embed code.
Settings: I selected the medium size, 960×720, which fits the blog post size a bit better than the small version (the text was harder to read).
Just be careful not to make a drawing that is too big to fit in your post. Test it out, to make sure the text is easy to read after being embedded.
Here is the code I got from Google:
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQDXRZgF2lzTC8aPYrlU8rYqpD4Mz1qWq--7H40AAMfC9tttk0RZZPJ2-p2XWSPBLXbMwz0xlDpECM7/pub?w=960&h=720">This code was then pasted into a Custom HTML block, below:
Note: This was tested using an author role.
Google Docs is an online, collaborative document creation tool. Apart from adding and organizing text, you can also add images, charts, symbols, etc.
This is the sample doc being demonstrated below, and it has been shared with the public: https://docs.google.com/document/d/1KaUxw6sxtxisRjMytHtq9bHEn-30Qc1MyjN6nVCPR4Q/edit
When editing your Google Doc, go to File (in the menu) > Publish to the web & get the embed code.
As you can see from the sample below, this doesn’t quite work out-of-the box. Adding some simple sizing instructions can make the embed work better – with or without a scrollbar (it will take some trial and error to find the right values).
Here is the embed code I got from Google:
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQpBF5Z9a02DALDxXD652VicZ2hOz_Rw7KHf30rF_20ITFCmpLVPSNxAHunuHDtWBqfPFBl6kGf622H/pub?embedded=true"></iframe>Test below created by a blog author.
Here is a version where I added width & height values to the iframe code, as well as a frame border so you can see the edges of the doc. A width of 100% will take up the width available in the post. You’ll need to do some trial and error with the height value, and find a value large enough to display your post without too much extra whitespace. I’ve made it just long enough to show most of the doc, with a scrollbar.
All of my additions are in bold:
<iframe src="https://docs.google.com/document/d/e/2PACX-1vQpBF5Z9a02DALDxXD652VicZ2hOz_Rw7KHf30rF_20ITFCmpLVPSNxAHunuHDtWBqfPFBl6kGf622H/pub?embedded=true" frameborder="1" width="100%" height="1500"></iframe>After some testing, I couldn’t find a way to embed the following native Google content types…
Shared to anyone with the link. Does this even work?
This only worked with a special version of the URL from Google AND only when I’m logged into my Ryerson Google account. Not sure how to get this to work widely.
https://drive.google.com/u/1/uc?export=download&id=0B9LKEddT6B_1V3RNcnh0SXZkUDg Where the id= includes the ID code from the file uploaded.
Below, I’m trying the version of the URL without the /u/1 (which references our domain somehow). It doesn’t work when I preview it – but does it work publicly? (no)
Here is just the sharing link from Google:
https://drive.google.com/file/d/0B9LKEddT6B_1V3RNcnh0SXZkUDg/view?usp=sharing
Twitter URL permalink embed:
https://twitter.com/DMPRyerson/status/218373988269830144
Videos after the jump.
Continue reading “Media Post (Image, Twitter, Youtubex2)”This post has far too many tags.
