How to Make a Mobile Friendly YouTube Video Embedded on a Website

Now that we have learned how to get rid of related videos when embedding a YouTube video on a website, let’s move on to embedding a video so it is mobile friendly when posted on a website.

Here is a screen shot of some basic steps shared by Dave Wiens, EdMedia, that he said should work on all our liferay websites. I’m using a screen shot as WordPress changes the coding to something else when I type it in directly.

Here is what you will see in the screen shot:

  • The original coding is taken directly from this YouTube video. NOTE: I unchecked “show suggested videos when the video finishes” and got a “?rel=0” after the YouTube video ID. (0 is zero)
  • I have highlighted in yellow the video ID from the old coding that I put into the correct location in the new coding. I found it was easier to just drop the one into the other than try to type it all from scratch.
  • Note: When you use the coding, remove spaces between the different parts – I showed them this way so you could view the sections more easily.
Switching from the old coding to a new responsive coding to make embedding a YouTube video in Liferay more mobile friendly

Switching from the old coding to a new responsive coding to make embedding a YouTube video in Liferay more mobile friendly

When you first look at the new version of your video while you are directly working on the file, it will look small:

(FYI – YouTube gives you a choice of 3 thumbnails for videos – the thumbnail below was the best of choices and does not reflect on the quality of the actual slides.)

feeding-1
However, when you view it as it actually looks on the web, it will appear much larger. The video will be “responsive” to the size of the webpage on which it is embedded.

feeding-2

And finally, here is how it looks on my phone:

mobile-friendly-coding

To check out the video on your own phone, visit the webpage where it was posted.

Questions or comments? ahenneman@unl.edu

This entry was posted in Social Media, Web-based Learning and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s