Top 10 Ways to Embed Video into a Web Page

Since digital camcorders and video editing software became accessible to the large audience, it’s no longer a challenge for anybody to make a video. This fact underlies a lot of web trends, namely the sky-rocketing popularity of video sharing portals and widespread use of video content across websites and blogs.

A good piece of video can help you deliver your message more effectively, educate readers, stimulate discussion and get your brand going far beyond your own domain.

Happily, it’s not a problem nowadays to integrate a video into a web page, as there’s a lot of different tools to assist with this task. Some of them are free, others are pricey. Here is a roundup of the most popular means of web video embedment.


by  | http://www.onextrapixel.com

Since digital camcorders and video editing software became accessible to the large audience, it’s no longer a challenge for anybody to make a video. This fact underlies a lot of web trends, namely the sky-rocketing popularity of video sharing portals and widespread use of video content across websites and blogs.

A good piece of video can help you deliver your message more effectively, educate readers, stimulate discussion and get your brand going far beyond your own domain.

Happily, it’s not a problem nowadays to integrate a video into a web page, as there’s a lot of different tools to assist with this task. Some of them are free, others are pricey. Here is a roundup of the most popular means of web video embedment.

Embed Video into a Web Page

10 Ways to Embed Video into a Web Page…

1. YouTube Embed Code

If you run a branded channel on YouTube, there’s a good opportunity to use YouTube embedding facilities. There are some obvious marketing benefits of this method: once submitted, your video gets involved into the full cycle of YouTube life with its views, search queries, comments, ratings, playlists, etc. Thus, you increase the chances of your video content attracting visitors to your resource. The embedment procedure is fast and easy: you upload a video to your channel, go to the player, acquire the embed code and paste it into your web page. YouTube also provides additional options to customize the player like play in HD, switch to HTTPS, suggest other videos, etc.

YouTube Embed Code

2. Vimeo Embed Code

Vimeo is YouTube’s main rival, especially in the area of video embedment options. Vimeo videos are also viewed by thousands of web users and can be easily integrated into other websites or blogs. Vimeo player is very handsome and streamlined. The blue “Embed” button in the upper right of the video leads to a dialog box with the embedding options. Basic account holders are allowed to customize player size, text colors and add other elements, while Vimeo Plus members enjoy the complete control over the player, including options to choose what happens next and where the video can appear.

Vimeo Embed Code

3. Facebook Video Integration

Facebook doesn’t officially provide any video embedding options, still if your video is available only on Facebook, there is a workaround. Each video on Facebook has an id which shows in the URL, e.g. http://www.facebook.com/video/video.php?v=2894326448598. Copy the last digits and paste them into the following code instead of xxx in the video link:

1
2
3
4
5
6
7
8
<object width="400" height="224" >
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://www.facebook.com/v/xxx" />
<embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
</embed>
</object>

Then you can put that code on any web pages and the Facebook video will play just like any other Flash video. You can optionally change the player size, add more parameters like autoplay or loop.

4. HTML5 Video

HTML5 is one of the most straightforward new techniques of video embedment. The new tag in HTML5 markup allows web developers to add videos into a web page without any special plugins. To make the most of HTML5 video, you have to prepare your video in three variants – H.264, Theora OGG and WebM, since different web browser support this or that video codec for the new HTML5 standard. The sample code for HTML5 video looks like this:

1
2
3
4
5
<video width="320" height="240" controls autoplay poster="video.jpg">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

This method has one obvious disadvantage – HTML5 video isn’t supported by old versions of Internet Explorer (5,6,7,8) which are still used by the majority of web users. So the old-style Flash embedding code inside the HTML5 video element is often provided as fallback.

5. Freemake Video Converter

If you don’t want to outsource video hosting to third-party websites, it’s possible to make a video web-ready with the help of Free Video Converter from Freemake.com. This video converter outputs to Flash FLV and SWF formats. The main advantage of this tool is that it provides ready HTML code and step-by-step instructions on how to embed it. Alternatively, you can convert your videos to HTML5 supported format, the converter will prepare all three video variants in a batch and show how to integrate them into HTML5 markup. The software is for Windows only.

Freemake Video Converter

6. oEmbed

oEmbed is an open standard for embedding videos and images into a website. You can use the video URL available on YouTube, Vimeo, Dailymotion, Flickr, Scribd, Hulu and supported resources. The simple API allows websites to display embedded content when a user posts a link to that resource, without having to parse the resource directly. So you don’t have to copy and paste HTML code from a hosting website every time you wish to embed a video. The best example of oEmbed integration is Facebook’s status update: when you paste a YouTube link in the status bar, it is automatically rendered in the video player. oEmbed easily integrates into WordPress via Shortcode API, the instructions are provided.

7. Quick Media Converter

Quick Media Converter is another Windows-based converter for audio and video. It outputs to Flash, QuickTime, RealMedia, H.264, OGG, so it is possible to make a streaming video for HTML or HTML5 web integration. Video parameters are easily customizable. However, no embed code or batch mode conversions are provided.

Quick Media Converter

8. Free Video Coding

Free Video Coding is an online service which helps create a web video player. Once you enter the website, you get into the FreeVideoCoding wizard. You just need to answer simple questions and the app will create custom HTML video codes based on your answers. You can choose WMV, MOV, SWF, FLV, RM, MPEG, and even AVI for the output. What I missed here is the player preview, though this method is perfect for a novice web blogger.

Free Video Coding

9. Video LightBox

Video LightBox is a wizard program for Windows and Mac that helps you easily insert video to your website or blog, in a few clicks without writing a single line of code. It is free for non-commercial use, business licenses start at $49. To embed a video, you need to add a video URL (from YouTube, Facebook, Google Video, Metacafe, Vimeo, MySpace) or drag and drop a desktop video file, then select the template and publish the result to your website via a built-in FTP client. Video LightBox offers a wide range of video player templates: rounded, rectangular, in Polaroid, Mac, Facebook or even a yellow sticker style.

Video LightBox

10. Easy HTML5 Video

Easy HTML5 Video, as the name hints, is developed to convert videos into HTML5 supported WebM, MP4, and OGG formats. It provides all formats in a batch, embed code and Flash fallback. Plus, it features additional options such as the ability to publish video from the software interface, specify controls for the HTML5 video player, select the video thumbnail, resize video and add a watermark. The program works for Windows and Mac OS, to use it for business you need to buy a license ($49-69).

Easy HTML5 Video

Conclusion

The methods listed above are well suited for both novice and savvy web developers, each of them having their own pros and cons. Thus, if you opt for a third-party video hosting, keep in mind that the existence of your videos will be fully dependent on the video channel policy. Self-hosted videos can hardly be deleted or republished outside your own resource, but you won’t reap the marketing benefits of additional video broadcasting. So it’s up to you to decide which method of video embedding to pursue. Still don’t forget that posting videos on a regular basis will surely diversify your web content and maximize your online business presence.

AUTHOR

Elena Vakhromova is a freelance blogger and social media marketer. She enjoys writing about popular multimedia apps and take an active part in their promotion in social media. She is currently work for Freemake.com, an online freeware project that offers free video/audio conversion and YouTube download tools.

Autor: Gabriel Catalano - human being | (#IN).perfección®

Lo importante es el camino que recorremos, las metas son apenas el resultado de ese recorrido. Llegar generalmente significa volver a empezar!

2 opiniones en “Top 10 Ways to Embed Video into a Web Page”

Comentarios cerrados.

GENTE COSMO

LIFESTYLE - by Esther Herrero

Being Your Brand

Branding and Strategy for Business and Life

Cruces, Sol y La Imaginación

Cuando la imaginación y la creatividad suman infinito

tranquicomix

fanzine bejarano de historietas hecho en los 80

A Stairway To Fashion

imagination is the key

Vinod833's Blog

This WordPress.com site is the bee's knees

Apasionada de las Redes Sociales

Compartir conocimientos 2.0 y Marketing Online

Zona de Promesas

Blog de Tecnología en Español - Internet - Redes Sociales - Entrepreneurship - Innovación

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Poesías, relatos, diario de sueños

Unencumbered by Facts

Taking unsubstantiation to new levels

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

BLOGTEC

Noticias de Tecnologia.

T a l e n t o  en  E x p a n s i ó n

Gestión de personas y transformación digital para las organizaciones líderes de la Era del Conocimiento

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Ideas para la clase

Experiencias creativas en la clase de español.

Little Grey Box

#TravelWell

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea Growth Hacking

Expertos en estrategia y auditoria de marketing

The Coaching Alliance

El camino hacia el éxito

Erick Lovera

Mi Pasión en un Blog

Estampas de México.

“Un fotógrafo tiene que ser auténtico y en su obra, debe expresar emociones, provocar reacciones y despertar pasiones.” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Escritora y formadora en comunicación

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

be.blog

be. Intelligent Multimedia Education

~~Mente en Gravedad~~

************************************************************************************************************

The Xtyle

Fashion Blog - Un Blog de Moda y Tendencias by Bárbara Sanz Esteban

aníbal goicochea

Tecnologías de la Información y Estrategia

A Waterfall of Sound

"Poetry is when an emotion has found its thought and the thought has found words." Robert Frost

Health & Family

A healthy balance of the mind, body and spirit

Style & Design

Fashion Trends and News

U.S.

News, Headlines, Stories, Video from Around the Nation

A %d blogueros les gusta esto: