Home > Article > Web Front-end > Can videos be stretched in html5?
Can videos be stretched in html5?
- WBOYOriginal
- 2021-12-21 13:45:092641browse
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 "
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>
Output result:
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!