如何使用 CSS 将视频向右移动 - 以提高响应能力？

Posted 2023-05-09

【中文标题】如何使用 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>

【讨论】：

没用：/