关键词：
【中文标题】如何使用 CSS 将视频向右移动 - 以提高响应能力？【英文标题】：How do I shift a video to the right with CSS - for responsiveness? 【发布时间】：2021-12-17 03:16:54 【问题描述】：因此，对于大于 1080 像素的任何页面，此视频都非常适合，但在 768 像素和 1080 像素之间，视频会被截断。我可以将高度调小，以便显示整个视频，但理想情况下，我希望视频保持相同大小但向右移动。
我在 hubspot 上做这个，所以它是模板的背景。任何帮助将不胜感激！
这是我一直在玩的代码：
@media only screen and (min-width:769px) and (max-width: 1080px)
.video-container
min-width: 100% !important;
margin: auto 0;
padding: 0;
/* transform: translate(-30%,0%);*/
#background-video
/*display: none; */
margin-right: 0px !important;
transform: translateX(-50%);
min-height: 40% !important;
@media only screen and (max-width: 768px)
#background-video
display: none;
body
background: #007be2;
background-size: 750px 500px;
<div class="video-container" style="position: absolute; height: 100vh; width: 100vw; overflow: hidden;">
<video id="background-video" autoplay loop muted poster="https://f.hubspotusercontent10.net/hubfs/3221062/Current%20Rhonda%20Media/MicrosoftTeams-image%20(1).png" style="width: 80%;
height: auto;
min-width: 100%;
min-height:60%;
object-fit: cover;
position: absolute;
left: 50%;
right: 50%;
top: 20%;
transform: translate(-50%,-50%);
bottom: 0;
z-index: -1;">
<source src="https://f.hubspotusercontent10.net/hubfs/3221062/Current%20Rhonda%20Media/Home%20Page%20Banner%20v2-Final.mp4" type="video/mp4">
</video>【问题讨论】：
【参考方案1】：默认情况下，视频是inline-元素（即使被视为inline-block）。因此，您必须使用 display: block; 将其转换为块级元素，然后您可以使用 margin: 0 0 0 auto; 将其推到右侧
video
margin: 0 0 0 auto;
display: block;
/* for vizualisation purpose only */
video
border: 2px solid red;
<video>
<source src="https://temp.media/video/?height=400&width=500&length=10&text=">
</video>【讨论】：
没用：/如何在悬停时将装载机从左向右移动？
】如何在悬停时将装载机从左向右移动？【英文标题】：howtomovetheloaderfromlefttorightonhover?【发布时间】：2021-06-2408:41:16【问题描述】：我有一个简单的div，其中有一个带有4个跨度和一个文本的标签我正在尝试在悬停我的名字时创... 查看详情
如何通过轻触按钮将 UISlider 缓慢地向左或向右移动？
】如何通过轻触按钮将UISlider缓慢地向左或向右移动？【英文标题】：HowdoIslowlymovemyUISlidertotheleftorrightwithatouchofabutton?【发布时间】：2016-07-1603:11:00【问题描述】：我有这两个按钮，如果我按下左侧的按钮，我希望滑块一直缓慢... 查看详情
如何将导航栏向右移动并应用背景颜色？
】如何将导航栏向右移动并应用背景颜色？【英文标题】：Howtomovenavbartorightandapplybackgroundcolor?【发布时间】：2021-08-0410:38:22【问题描述】：我正在使用react+tailwind制作一个简单的应用程序，我目前正在开发导航栏部分。Navbar.js：... 查看详情
使用 CSS3 悬停效果，如何将文本向左移动 5 个像素并向后移动？
】使用CSS3悬停效果，如何将文本向左移动5个像素并向后移动？【英文标题】：UsingCSS3hovereffect,howcanImovethetextleft5pixelsandmoveitback?【发布时间】：2013-08-0405:17:33【问题描述】：假设我有一个锚标记。当锚标签悬停时，除了颜色和背... 查看详情
表格列 (td) 中的 CSS：向右对齐但向左移动并使用填充
】表格列(td)中的CSS：向右对齐但向左移动并使用填充【英文标题】：CSSintablecolumn(td):Alignrightinbutmovetotheleftwithpadding【发布时间】：2019-04-1003:16:04【问题描述】：我必须在html表格中显示数字，并且更喜欢将它们向右对齐，但是数... 查看详情
在购物车和结帐时将运费金额向右移动
...eckout【发布时间】：2021-08-0603:00:37【问题描述】：我需要使用我尝试过的CSS将运费从左向右移动（我用Chrome检查了源代码，然后对其进行了编辑并将其粘贴到WordPress中的自定义CSS中。）：tr.shippingspan.amountmargin-left:26%;但它并不完... 查看详情
如何将数组中的元素向右移动？
】如何将数组中的元素向右移动？【英文标题】：Howtoshiftelementsinanarraytotheright?【发布时间】：2020-06-1319:40:05【问题描述】：我是编程新手，现在正在学习c++。我有一个对象数组，我想在另外两个对象之间添加一个新对象。我创... 查看详情
使用 CSS 当窗口宽度减小时向右移动元素
】使用CSS当窗口宽度减小时向右移动元素【英文标题】：MoveanelementrightwhenwindowwidthdecreasesusingCSS【发布时间】：2018-02-2815:44:33【问题描述】：默认行为*margin:0;html,bodyheight:100%;divwidth:10rem;height:10rem;background-color:#333;position:absolute;left... 查看详情
移动视频对象
...拖出以增加其大小并放大或反之亦然。我找不到任何示例如何做到这一点。如果有人知道Actionscript3，如果您能帮助我，我将不胜感激。varcam:Camera 查看详情
如何将 SpriteKit 节点移动为汽车驾驶体验？
】如何将SpriteKit节点移动为汽车驾驶体验？【英文标题】：HowtomoveSpriteKitNodeasCardrivingexperience?【发布时间】：2020-03-1718:31:47【问题描述】：我想根据用户触摸但使用曲线移动我的汽车。每当我触摸场景时，它都会正常移动。但我... 查看详情
您如何获得宽度以不仅将元素向右扩展，而且向左扩展？
】您如何获得宽度以不仅将元素向右扩展，而且向左扩展？【英文标题】：Howdoyougetthewidthtonotonlyextendtheelementtotheright,butalsotheleft?【发布时间】：2015-09-1900:51:10【问题描述】：好吧，标题说明了一切。（我不能使用“left:...;”）... 查看详情
Sikulix：将鼠标向右移动
...向右移动，而且图片的位置并不总是在同一个地方。请问如何将鼠标向右移动50px。谢谢【问题讨论】：【参考方案1】：我找到了x=50y=0鼠标移动(x,y)来自官方文档：https://sikulix-2014.readth 查看详情
如何将视频帧推送到 obs 服务器以在 Android 上进行移动直播
】如何将视频帧推送到obs服务器以在Android上进行移动直播【英文标题】：HowtopushvideoframetoobsserverformobilelivestreamingonAndroid【发布时间】：2021-12-0711:49:41【问题描述】：我是一名安卓开发者，想从摄像头录制视频并将其推送到媒体... 查看详情
在相机拍摄期间分割视频以提高上传效率
...-2310:08:04【问题描述】：我想开发一款Android应用，该应用使用手机的摄像头拍摄视频，然后将视频（作为单个文件）上传到云端。然后我想通过将录制的视频分割成小块（比如5秒）并将这些块上传到云端来提高效率。然后比较... 查看详情
当我向左或向右移动鼠标时如何更改帧（动作脚本）
】当我向左或向右移动鼠标时如何更改帧（动作脚本）【英文标题】：Howtochangeframeswhenimovemymouseleftorright(actionscript)【发布时间】：2016-02-1301:16:51【问题描述】：我使用一条鱼作为鼠标光标，但是当我在舞台上移动它时，它只面... 查看详情
如何使用动画移动跨度？
】如何使用动画移动跨度？【英文标题】：Howtomovespanswithananimation?【发布时间】：2013-05-1402:56:04【问题描述】：我正在使用twitter-bootstrap框架，并且我有两个span4以偏移类为中心。我要做的是制作一个动画，删除偏移类并将跨度... 查看详情
将音频视频与ffmpeg合并时如何提高结果视频的质量？
】将音频视频与ffmpeg合并时如何提高结果视频的质量？【英文标题】：howtoimprovethequalityofresultantvideowhenmergingaudio-videowithffmpeg?【发布时间】：2011-06-1419:18:27【问题描述】：使用ffmpeg合并音频和视频时，生成的视频质量会下降。我... 查看详情
如何以编程方式检测屏幕撕裂？
】如何以编程方式检测屏幕撕裂？【英文标题】：Howtodetectscreentearingprogrammatically?【发布时间】：2014-07-1122:14:32【问题描述】：假设我已经录制了监视器屏幕的高清视频，我想验证是否有任何screentearing发生。我该怎么做？我在这... 查看详情