How to Embed Videos on Your Website

Adding videos to your website increases engagement and time-on-page. You can embed videos from platforms like YouTube and Vimeo, or host them yourself. Each method has trade-offs in terms of performance, control, and ease of use.

Embedding YouTube Videos

Go to the YouTube video you want to embed.
Click Share → Embed.
Copy the embed code and paste it into your HTML:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video Title"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the actual video ID from the URL.

Embedding Vimeo Videos

<iframe src="https://player.vimeo.com/video/VIDEO_ID"
  width="640" height="360"
  frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture"
  allowfullscreen>
</iframe>

Making Embeds Responsive

Wrapping the iframe in a responsive container ensures it scales properly on all screen sizes:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0" allowfullscreen>
  </iframe>
</div>

The 56.25% padding-bottom creates a 16:9 aspect ratio.

Self-Hosting Videos

Use the HTML5 <video> element to host videos on your own server:

<video controls width="100%" preload="metadata" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video element.
</video>

When to self-host:

You need full branding control (no platform logos or recommendations).
Videos contain sensitive or private content.
You want to avoid third-party tracking.

When to use YouTube/Vimeo:

You want free, reliable video delivery with adaptive streaming.
You benefit from YouTube SEO and discoverability.
You want to reduce bandwidth costs on your hosting plan.

WordPress Video Embeds

WordPress makes embedding easy — just paste the video URL directly into the editor:

https://www.youtube.com/watch?v=VIDEO_ID

WordPress automatically converts supported URLs into embedded players using oEmbed.

Performance Optimization

Videos can significantly impact page load times. Use these techniques:

Lazy load iframes: Use loading="lazy" on iframe elements.
Facade pattern: Show a thumbnail with a play button; load the full embed only when clicked. Plugins like WP YouTube Lyte or Lite YouTube Embed handle this.
Use preload="metadata" for self-hosted videos to avoid loading the entire file on page load.
Compress video files before uploading. Use HandBrake or FFmpeg to reduce file size.
Serve WebM format alongside MP4 for better compression with supported browsers.

Accessibility

Always include a title attribute on iframes for screen readers.
Provide captions or subtitles (YouTube and Vimeo support these natively).
Include a text transcript below the video for users who can’t watch it.

How to Embed Videos on Your Website