There are two main methods for embedding videos in web development. 1. Use the HTML5

In web development, embedding videos is actually not difficult. HTML5 provides a special <video></video> tag, which allows you to easily add videos to the page without relying on third-party plug-ins.

Embed directly using the <video></video> tag

This is the most common and recommended method. You can use the HTML <video></video> tag to embed local or remote video files. The basic writing method is as follows:

 <video src="example.mp4" controls></video>

Several common attribute descriptions:

• controls : add play, pause, volume and other controls.
• autoplay : Autoplay (some browsers will restrict this feature).
• loop : playback loop.
• muted : Muted playback, helps solve the problem of automatic playback being intercepted by the browser.

If you want to support multiple formats, such as providing MP4 and WebM at the same time, you can write this:

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

Embed YouTube or Vimeo videos

If you want to embed videos on YouTube or Vimeo, they usually offer the option of "share" or "embed" and you can copy the code and paste it directly into your page.

For example, YouTube's embed code usually looks like this:

 <iframe src="https://www.youtube.com/embed/Video ID" 
        width="560" 
        height="315" 
        frameborder="0" 
        allowfullscreen></iframe>

A few tips:

• Replace視頻ID to the video ID you want to display.
• If you want to adjust the size, just change width and height .
• The allowfullscreen property allows users to play in full screen.

Vimeo's method is similar. It will also generate an iframe address and just put it in.

Adjust style and responsive design

In order to make the video appear normally on different devices, it is best to have responsive features. It can be implemented through CSS:

 .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio*/
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Then wrap a layer of container in HTML:

 <div class="video-container">
  <iframe src="https://www.youtube.com/embed/xxx" allowfullscreen></iframe>
</div>

After doing this, the video can be automatically scaled according to the screen size, without any deformity or misplacement.

Basically that's it. The operation is not complicated, but there are several details that are easy to ignore, such as video format compatibility, automatic playback strategy, mobile adaptation, etc. As long as you pay attention to these points, you should not encounter too many problems with embedding videos.

The above is the detailed content of How to embed a video in HTML?. For more information, please follow other related articles on the PHP Chinese website!