HTML 视频旋转、大小和定位

Question

你好 :) 我正在尝试学习一些非常基础的东西 HTML，但我在让视频按照我想要的方式运行时遇到了问题 :( 我希望我可以有 3 张图像和视频，以相同大小显示，在同一行上彼此相邻，等距。

我的 HTML 看起来像这样：

<div class="flex-container2">

<img src="lolly_jar.jpg" 

style="width:200px;height:400px;padding-left:20px;">



<img src="lolly_jar_top_down.jpg" 

style="width:200px;height:400px;padding-left:20px;">



<img src="lolly_jar_with_measurement.jpg" 

style="width:200px;height:400px;padding-left:20px;">


<rotates>
<video style="width:75%;" autoplay loop muted  
    <source src="lolly_jar_movie_best.MOV" type = "video/MOV" > >

</rotates>

我的CSS看起来像这样

[![.flex-container2 {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;

padding-top:20px;
padding-left:20px;
padding-right:20px;

}

/* I need to rotate the video or it plays horizontally because 
of the way I shot it on my phone */

rotates {
     display:block;
     -ms-transform: rotate(90deg); /* IE 9 */
     -webkit-transform: rotate(90deg); /* Safari */
     transform: rotate(90deg);
}
</div>

我在下面附上了我当前代码的最终样子。我真的无法弄清楚为什么视频处于奇怪的位置，或者为什么它周围似乎有一堆 space...

感谢大家的帮助和时间

Answer 1

您是否为 HTML 文档设置了样式 sheet？例如，<link rel="stylesheet" href="./css/downtownboxingglobal.css">?

你为什么不尝试操纵一个导航栏，让它们水平并排播放？这是有关导航栏的 W3Schools 教程。您尤其需要阅读有关水平导航栏的部分。

https://www.w3schools.com/css/css_navbar.asp

这是他们的代码，在浏览器视口中有一个方便的视图。

https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float

HTML 视频旋转、大小和定位

HTML Video Rotation, Size and Positioning

css

resize

position

orientation

html5-video