The Three Ways of Video in HTML

HTML5 VIDEO

HTML5 video uses the <video> tag, and links the video file directly to the .html without going through a service like YouTube or Vimeo. Generally speaking, you should only use HTML5 video for short bursts of video, like video loops. That’s because videos longer than a few seconds can generate large file sizes that might not load easily on browsers, particularly mobile phones. If you have a non-looping video, you are almost always better off uploading that video to YouTube or Vimeo because those services can automatically adjust the format and the bandwidth to play on most devices.

If you have a short loop, however, HTML5 is your best option. YouTube does not do a good job of looping video – at the end of each video it comes to a full stop, which is not ideal for a loop.

Use Basic HTML5 Video for Video Loops

This is a basic video tag setup:

<video loop muted autoplay controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

HTML5 Video Attributes
Many of the video tag attributes are set in the .html file, inside the video tag, NOT the .css. Here are some of the more useful attributes.

loop –  Tells the browser to automatically loop the video

<video loop>

muted – Mutes the audio from the video

<video loop muted>

autoplay – Automatically plays the video when the page loads. NOTE: Autoplay only functions in Chrome and Safari when MUTED is included.

<video loop muted autoplay>

controls –   Shows the default video controls (play, pause, etc)

<video loop muted autoplay controls>

poster  – Provides an image to show before the video loads, or if there is a problem loading the video. A .png file is the preferred format.

<video  loop muted autoplay controls poster = “myposter.png”>

MP4 is the Most Popular Format for HTML5 Video

When you export video from Premier as .m4v, that is technically a version of mp4.
http://techcrunch.com/2012/04/17/survey-mp4-is-top-format-for-web-and-mobile-videos/

Multiple Video Formats for HTML5 Video
.mp4 does not work on all browsers. In order for your HTML5 videos to work on all browsers, you should convert each video to .mp4 and to .webm. NOTE: Google Chrome in particular seems to have problems with .mp4. Here are some tools that let you convert your video to .webm:

http://video.online-convert.com/convert-to-webm (This is a Web-based tool)

If you are super-geeky like me and want to know more about webm:

http://www.webmproject.org/about/faq/

HTML5 video in general:

http://www.html5rocks.com/en/tutorials/video/basics/

Once you have your video in both an .mp4 and a .webm format, you insert it into the html like this:

<video autoplay="autoplay" loop muted>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

Setting the Size of the HTML5 Video
You set the width of the video in the .css. It’s best to use a percentage.

EMBEDDING HORIZONTAL AND VERTICAL VIDEOS FROM. YOUTUBE

Most of the time, except for video loops, you will upload your video file to a service like YouTube or Vimeo and then embed them in your .html file. To embed horizontal videos, use embedresponsively.com. To embed vertical videos you will modify the embed tag from. YouTube.

Embedding Horizontal Videos from Embed Responsively

Embed Responsively is a great utility that generates code for content from Youtube and Vimeo, Google Maps, SoundCloud, Twitter and other services in a way that will make them behave responsively in your site, which is what you want. You should use Embed Responsively when you want to embed these formats into your .html.

To embed a horizontal YouTube Video:

  1. Go to YouTube
  2. Select a video
  3. Click on the SHARE button below the video
  4. Click COPY to just copy the link to the video. (You don’t want to use embed here.)
  5. Go to Embed Responsively – https://embedresponsively.com/
  6. Paste your URL
  7. Click the EMBED button.
  8. Scroll down to see your video and some code below.

Notice that the embed code has two parts. The first part, which I have highlighted, is the styling that goes into your .css (not your .html). You want to copy all of the text between the style tags. You do not want the style tags. You want to begin with .embed-container and end with }. Paste this into the .css. This will add two classes: .embed-container and .embed-container object, .embed-container embed.

The second part begins with <div> and ends with </div>. Put this code into your .html where you want the video to appear.

Embedding Vertical Videos

Embedding vertical videos is almost as easy as embedding horizontal videos. First, you want to upload your vertical video to YouTube. It will come out horizontally on YouTube, with black bars on either side. However, you can change that within the .html.

  1. Upload your vertical video to YouTube.
  2. When it is done uploading, click on the SHARE button.
  3. This time, select the EMBED option, and copy the EMBED code.
  4. Next, paste the code into your .html
  5. If you preview, you will see that your video is horizontal. You want to make it vertical. To do this, look at the code in the HTML. There should be a width and a height. Generally speaking, the width is 560 and the height is 315. Simply transpose this so that the height i 560 and the width is 315.
  6. If you want the text to wrap around the vertical video, add iframe to your .css and set it to float: left or float: right, whichever you prefer.

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s