2.00b Toy Product Design

HTML Video

Embedding video on a web page is easy if your video is in a supported format. The <video> tag supports MP4, WebM and Ogg video formats. The tag does not support the Quicktime MOV format, which is used by Apple's iPhones, iPads and Mac computers.

Android/Google Video (.mp4)

If you have an Android based phone, it is likely saving videos in MP4 format. To embed the video in your portfolio, place the video file in the media directory for your portfolio. You may want to rename the video to something that reminds you of what the content of the video is. Then include the following html code in your index.html page:

          <video width="960" height="540" controls>
            <source src="media/my_awesome_movie.mp4" type="video/mp4">
          </video>
          

Apple/iPhone Video (.mov)

For .mov files, you may either link to the file so that the user may download the file and play it on their computer, or you may convert the file to one of the supported video formats above and use the <video> tag to embed the video in your webpage. To include a link to your video file that is in the media directory for your portfolio, include the following html code in your index.html page:

          <a href="media/my_awesome_movie.mov">Click to download my demo movie</a>
          

Convert .mov to .mp4 using Handbrake

• Download and install Handbrake from its official website.
• Follow the instructions in the Quick Start.
• Click "Open Source" and select the video file you want to convert.
• Be sure "Format" is selected to be "MP4 File".
• Specify the filename for the output file in the "Save As" box.
• Specify the folder to save the output file in using the "Browse" button to the right of the "Save As" box.
• The default preset "Fast 1080p30" is fine. May also check the "Web Optimized" option.
• Click "Start".

Google Photos and Apple iCloud links

Another option is to link to your video that is already online in Google Photos or Apple iCloud. These services will provide you with a link to share your video and you may provide that link in an <a> tag as shown below:

          <a href="http://google_or_icloud_link" target="_blank">View a demo.</a>
          

In the HTML code above, the link will open in a new tab or window, leaving your portfolio still available on the user's web browser.

YouTube/Vimeo embed links

You may also upload your video to a video streaming service like YouTube or Vimeo. The streaming service will provide you with the HTML code you need to include in your web page to show the video on your web page. In general, for large video files a streaming video service is preferred over the HTML <video> tag.