Integrate multimedia in your WordPress post through auto-embeds

0
839
wordpress-logo-hoz-rgb
From the real deal. 🙂

In case you didn’t know, Youth Are Awesome is hosted on WordPress. Being a blogger means having multimedia-oriented features to convey your posts effectively, so for example, we YAA bloggers frequently turn to YouTube to share viral videos of the day to crack a laugh out of you readers. 😀

To incorporate these mediums of expression, we embed them on our blog posts. This method of integration usually involves pasting huge chunks of code into the HTML editor (or the “text” editor on WordPress). They usually look something like this –

youtubeembed

But can turn into something similar to this –

vimeoembed

So it isn’t quite the most user-friendly coding you’ve ever seen. As you recall in my blog post on how to get your food review on Urbanspoon, you also had to add the widget to your blog post by using a long embed code. That shouldn’t stop you from including wonderful videos and such on your blog, however.

To be WordPress specific, a protocol named oEmbed (don’t worry, I won’t spam you with technical jargon) allows us users to be able to embed such content on blog posts just by adding the URL (the “regular” link) in your content editor. If you would like to add content from these websites, this method eliminates the hardest part for you.

Since I want to include a Twitter status, I can paste the URL of the page that comes up when I select “details” when clicking a tweet:

Twitterembed

Make sure that they are not hyperlinked like the image down below. If they are, press the de-hyperlink button (it looks like a paper clip broken in half) while selecting the link.

TwitterEmbedHyperlink

What you see is this –

https://twitter.com/WentaoHello/statuses/349720783452516353

And tweets with attached photos turn out to be like this –

https://twitter.com/WentaoHello/status/353611968147492864

For videos and vlogs, this is how the auto-embed turns out by default –

I personally think that player window is too small, so I use the embed width=”” height=”” tag (with square brackets sandwiching the code) in the editor to change the size of the embed. Input your desired width and height in the quotation marks and add “/embed” (with the same brackets).

For reference, this is the setting I use –

Wordpressembed

Vimeo and Dailymotion videos also work the same way. I’ve adjusted the size of them too for the player to be bigger.

The YouTube video was the one I featured in this post and credits to their respective owners!

If you have images you want to share from your Photobucket, Instagram, or Flickr accounts, you can also directly embed them instead of uploading them again through the “add media” button”. For example, here are some shots I took –

http://i1147.photobucket.com/albums/o543/TheAsianPride/26ac862b-8566-404a-b231-0df919027422.jpg

http://instagram.com/p/Qxx-AKFD2K/

Unfortunately, there are no ways to scale your images from their uploaded size when using this embed method. 🙁

How about SlideShare and SoundCloud? Aside from embedding videos and images in my blog posts, I hope to use stuff from these two platforms to help diversify the content. Here is how they turn out when you use the direct link to embed them –

http://www.slideshare.net/Ordona547/the-math-in-pokemon

It’s the same as before; the credit belongs to the owners of all these examples.

I hope to see more multimedia features sprang up here on YAA and if you encounter any difficulties, let me know and I’ll help you to the best of my knowledge. Be innovative with your approach to blogging. 🙂