How to embed videos onto your website

Jennifer

You got the right angles, filmed with just the right light, and edited down to the best lines. You may have even added extra graphics, music, and transitions to make your video more appealing.

Now it’s time to place your video on your website and start generating moore views. While this part of the process isn’t always straightforward, the best way to get started is through a process called embedding.

 

What is video embedding?

Video embedding is the process of adding a video into a website’s code. Embedding is how the video player and video become a part of the web page. The video is hosted at another location while you link to it on your site.

To embed a video, select the right format for the video. Know the difference between a desktop video and web video. With web video, all the content is played as it arrives through a continuous stream of data. However, not every video format can be streamed.

Some streaming formats include MOV, WMV, WebM, MP4, QT, 3GP, FLV, SWF, and RM. One major issue when choosing a format is finding one that isn’t strongly linked to a particular video streaming middleware.

For example, WMV works well with Microsoft Windows Media Player. FLV and SWF are compatible with Adobe Flash Player. MOV and QT work on Apple QuickTime Player. RM goes with RealNetwork’s RealPlayer. The ideal choice may therefore be something like MP4 (H.264, AAC) which isn’t closely connected to any specific video streaming middleware.

With this format, rest assured knowing that your video will play well in just about any desktop or mobile browser. With the introduction of the HTML5 web video standard in 2015, you can even embed videos without any middleware. Your videos will play smoothly on a PC, tablet, and smartphone.

 

How do you embed a video?

Embedding a video varies depending on whether you’re using YouTube, Vimeo, WordPress, HTML, or another platform entirely. 

 

YouTube

Create a YouTube channel and upload the video. Open the video and click on the “Share” option. Continue to the “Embed” button. 

 

You can select “Show more” and edit the settings to customize the look of the player. This may include player controls, video title and player actions, etc. 

Once you’re done, copy the embed code and paste it in your web page code. You can also customize the player’s size to give it a proper fit on your website.

 

Vimeo

With Vimeo, the steps are similar to YouTube. Upload the video to your channel, open the video, and click “Share.” Next, proceed to the “Embed” section. 

Just like with YouTube, you can click “More Options” and customize the player. You’ll be able to change things like looping, autoplay, and video descriptions.

Copy the embed code and place it on your web page. Vimeo offers a sleek player design that blends well into multiple sites.

 

WordPress

WordPress is a widely-used platform with the option to embed videos similar to how you’d embed images. However, there’s a limit to the file size for a single video upload.

Go to the post you want to add a video. Open it and click on the “Add” button. Continue to the media section and select the video option. Click “Upload” and choose the video you want to display. Ensure that the display settings are showing “Embed Media Player,” then insert the video into your post.

WordPress also has an alternate embedding method. Instead of clicking “Upload,” click “Insert from URL,” then paste the URL of the video you want to embed into the post. You can also add a video link into the post and WordPress will display the web player on that page.

 

HTML

While this method may be a little more intricate, it’s one of the best options if you want cross-platform viewing. Go to the post where you want to embed the video and go to edit mode. Scroll to the part in the page’s code where you’d like the video to appear.

Copy your video’s embed code and paste it right in that spot. You can preview the post to see whether the HTML player is appearing where you want it to and in the right dimensions. Save the changes and publish at your will. Premium tools like Projekktor and JW Player provide more customization options, including calls-to-action and subtitle embedding.

 

Conclusion

Ultimately, when selecting the embedding method you’ll use, be sure to consider factors like video promotion opportunities, hosting fees, page load speed, and other visual customization options. Some platforms offer greater customization, or make their branding less obvious on your page. To learn more about hosting and embedding videos with Firework, visit our business page.

ウェブストーリー プラットフォーム「Firework」。代理店向けパートナー・プログラムを開始
Rui Iwata
ショート動画のFirework×動画制作/ウェブ制作/SEOなどで価値を共創   ウェブストーリー プラットフォーム「Firework(ファイヤーワーク)」を提供するLoop Now Technologies(本社:米シリコンバレー、CEO:Vincent Yang)は、動画制作やウェブサイト制作、SEOコンサルティングなどを事業とするパートナーとの共創により、クライアントへより高い価値提供を目指すための、パートナー・プログラムを開始しました。またこの度は、Fireworkアンバサダーとしても参画するBGM株式会社とパートナー契約を締結しています。今後も様々なパートナーとの提携・発表を予定しています。   ■Firework パートナー・プログラムとは?   -パートナー プログラムの目的 本プログラムでは、当社Loop Now…
What is a Web Story?
Brian
We’ve all been there. Pulling out our phone for a quick break before suddenly realizing…
ウェブストーリーによってオープンウェブの変革を加速するアンバサダー・プログラムを始動
Rui Iwata
第1弾はShopify、EC-CUBE、Webコンテンツの専門家3名が参画   ウェブストーリー プラットフォーム「Firework(ファイヤーワーク)」を提供するLoop Now Technologies(本社:米シリコンバレー、CEO:Vincent Yang)は、動画ファーストのウェブサイトの普及によってオープンウェブの変革を加速するため、アンバサダー・プログラムの立ち上げを発表しました。第1弾では、Shopify教育パートナーの三浦卓也氏、EC-CUBEプラチナパートナーである株式会社RefineのCEO 大塚和男氏、集客に強い「本物のコンテンツ」を提供するBGM株式会社の代表取締役 市耒晃次氏が就任しました。   ■Firework アンバサダー・プログラムとは?   -アンバサダー プログラムの目的 …
How to grow your Shopify store with Web Stories
Kylie
Our Shopify app is officially live! It’s never been easier to add shoppable video stories…
【4月28日開催】Firework Japan Webinar Vol.2:ShopifyとFireworkで即日できる動画コマース ワークショップ
Rui Iwata
ウェビナータイトル:Firework Japan Webinar Vol.2:ShopifyとFireworkで即日できる動画コマース ワークショップ 本ウェビナーは、主にShopifyをご利用のお客さまが当日のうちに「動画コマースサイト」を作成するワークショップ形式で実施します。また本ワークショップにおける内容は、主に中小規模の事業者様に最適化したものになっております。 *Shopifyをお使いでない方でもご登録いただけますが、当日はShopifyを見本に利用いたしますので事前にご了承ください。     第1部:「自分でできる」見られるショート動画の作り方 SNSでの集客からウェブサイト内まで、動画を活用するための情報設計の考え方をはじめ、実際の商品を使った撮影方法をお伝えします。   講師:長田 幸洋氏(株式会社SNSコーチ 代表)…
Subscribe to our Blog