Home > Web Front-end > Front-end Q&A > Can videos be stretched in html5?

Can videos be stretched in html5?

WBOY
Release: 2021-12-21 13:45:09
Original
2688 people have browsed it

The video in html5 can be stretched. You only need to use the style and "object-fit" attributes to set the width and height of the video element. The syntax is "

Can videos be stretched in html5?

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

Can the video in html5 be stretched?

The video in html5 can be stretched.

If you want to achieve video stretching, you need to use the style attribute and object-fit attribute.

The style attribute is used to set the style of the element, and the object-fit attribute is used to specify how the content of the element should adapt to the height and width of the specified container.

When the value of the object-fit attribute is fill, the original proportion is not guaranteed and the content is stretched to fill the entire content container.

Then you can use the width and height attributes to set the width and height of the element.

The example is as follows:

<html>
<body>
<video src="/i/movie.ogg" controls="controls" style="object-fit:fill;width:400px;height:120px;">
your browser does not support the video tag
</video>
</body>
</html>
Copy after login

Output result:

Can videos be stretched in html5?

Recommended tutorial: "html video tutorial"

The above is the detailed content of Can videos be stretched in html5?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template