Pages

▼

May 17, 2020

Embedded Media: YouTube Videos and Playlists


One of the most powerful things about blog posts is that you can embed other kinds of media here: images, but also videos along with dynamic content from other sites like tweets, podcasts, etc.

Copying-and-Pasting in HTML View

Most of the time when you are embedding media, you will need to be prepared to use the HTML view of the post, pasting in the HTML code that you have copied from the media source. That is not as scary as it sounds, I promise. The key thing is to come up with a system to help you navigate the HTML view so that you know where you are copying and pasting. The way I do that is to type zzz wherever I want to paste the HTML code. So, for example, if I want to center something (which I usually do), I type some text for context, and then I center and type zzz where I will be pasting, like this:


And then, I can go to the HTML view of the post, use Control-F to find zzz and I can delete the zzz, pasting in the HTML code instead.

To access the HTML view so that you can copy-and-paste the code, you switch from the Compose view to the HTML view:

Old editor: upper left-hand corner


New editor: upper right-hand corner <> symbol


And then just switch back when you are done copying-and-pasting. Depending on the type of media you are embedding, you may or may not see the actual media displayed while you are editing the blog post. Sometimes it may just show up as a big blank white space but, don't worry, you can see how it actually works after you publish the post.

YouTube Videos and Playlists

 A key thing to remember about videos is that you may need to adjust the height/widget based on the size of your blog post. As a general rule, I always adjust videos to be 400 pixels wide, 225 pixels high. You will see those height/width parameters in the code you copy-and-paste from YouTube.

So, for example, when I go to a YouTube video I want to embed, like Shakira's Try Everything, I click on the share icon, then the <> embed panel, and Google gives me the code I need to use:


I copy the code, paste it into my blog post (see above), and I manually change the width/height parameters.  It comes out like this:


Even more powerful is when you embed playlists so that your students can have a context for the video they are watching, with easy access to more videos that you have put into the playlist. So, for example, here is a video from my Maati Baani playlist; it has 33 videos in it, and the embedding loads the whole playlist which users can navigate as a playlist:



Here's how that works; just click on the hamburger menu in the upper-right to navigate the playlist:


Playlists are a YouTube superpower; if you are not saving videos in playlists, it's a great thing to do, making the videos even more useful when you share them with your students. Plus, embedded playlists update automatically everywhere they are embedded as you add new videos!

Next up: more embedding with Twitter, NPR, and SoundCloud.