如何放置一个贴在视频底部并具有响应性的 div

Question

I am trying to place a div below a video and can't figure out what the best way is.我试图在视频下方放置一个 div，但不知道最好的方法是什么。 I want to stick it to the bottom of the video and make it responsive.我想把它贴在视频的底部并使其响应。 I want the div to stay at the same place on tablet/mobile screen too.我也希望 div 在平板电脑/手机屏幕上保持在同一个位置。

Here is what I have for now: https://codepen.io/luca099/pen/xxOwogo这是我现在所拥有的： https : //codepen.io/luca099/pen/xxOwogo

    <div class="myBlock">
    
        <div id="set-height"></div>
    
        <video id="v0" tabindex="0" ,="" autobuffer="" preload="" poster="https://www.agoria.be/brug-tussen-uw-bedrijf-en-technologische-vooruitgang/img/firstFrame.jpg">
          <source type="video/mp4" src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm">
        </video>
    
      </div>
    
      <div class="divBelowVideo">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.</p>
</div>
    
    .myBlock {
      margin-top: 80px !important;
      margin-bottom: 3rem;
    }
    
    #v0 {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
    }
    
    #set-height {
      display: block;
      height: 80vh !important;
    }
    
    video {
      display: block;
      height: 600px;
    }
    
    .divBelowVideo {
      position: inherit;
      width: 80%;
      margin: 0 auto;
      padding: 2% 4%;
      text-align: center;
      background-color: red;
      outline: none !important;
    }
    
    .divBelowVideo {
      width: 90%;
      padding: 2% 4%;
    }
    
    .divBelowVideo .row {
      display: none;
    }

Answer 1

Here is my solution:这是我的解决方案：

 var frameNumber = 0, // start video at frame 0 // lower numbers = faster playback playbackConst = 50, // get page height from video duration setHeight = document.getElementById("set-height"), // select video element vid = document.getElementById('v0'); // var vid = $('#v0')[0]; // jquery option // Use requestAnimationFrame for smooth playback function scrollPlay() { var frameNumber = window.pageYOffset / playbackConst; vid.currentTime = frameNumber; window.requestAnimationFrame(scrollPlay); } window.requestAnimationFrame(scrollPlay);

 body, html { width: 100%; height: 100%; margin: 0; padding: 0; /* overflow-x: hidden; */ } body { background-color: #eeedf5; padding-top: 100px; position: relative; margin: 0; padding: 0; } .myBlock { margin-top: 80px !important; margin-bottom: 3rem; } video { display: block; margin: 0 auto; height: 600px; width: auto; position: relative; } .bottom-video{ text-align: center; position: absolute; left: 50%; bottom: 30px; } .bottom-text{ position: relative; left: -50%; border: dotted red 1px; }

 <html> <link rel="stylesheet" href="https://acdn.be/_lib/bootstrap/agoriabootstrap_4.3.1/css/bootstrap.min.css" integrity="sha384-Ly2Bg/tgKeO6mK4rBkayaR8JkXojczLjXdTrLreT7rgywL1zzyyw28IhCwDjnxmJ" crossorigin="anonymous"> <body> <div class="myBlock"> <video id="v0" tabindex="0" ,="" autobuffer="" preload="" poster="https://www.agoria.be/brug-tussen-uw-bedrijf-en-technologische-vooruitgang/img/firstFrame.jpg"> <source type="video/mp4" src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm"> </video> <div class="bottom-video"> <div class="bottom-text"> I am some centered shrink-to-fit content! <br /> tum te tum </div> </div> </div> </body> </html>

You can play with the CSS to style and change your bottom DIV position as you wish.您可以根据需要使用 CSS 来设置样式和更改底部 DIV 位置。

thanks谢谢

Answer 2

My solution我的解决方案

Codepen: https://codepen.io/larrytherabbit/pen/rNLOXJe代码笔： https ://codepen.io/larrytherabbit/pen/rNLOXJe

 body { width:100%;height:450vh;margin:0:padding:0;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;background:lightgray; } .c { display:flex;align-items:center;justify-content:flex-start;flex-direction:column; position:fixed; } .c div { background:pink;width:100%;height:300px;margin-top:50px; }

 <body> <div class="c"> <video id="v0" tabindex="0" ,="" autobuffer="" preload="" poster="https://www.agoria.be/brug-tussen-uw-bedrijf-en-technologische-vooruitgang/img/firstFrame.jpg"> <source type="video/mp4" src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm"> </video> <div>some div content here </div> </div> </body>

如何放置一个贴在视频底部并具有响应性的 div

问题描述

2 个解决方案

解决方案1
0 2020-10-14 10:21:00

解决方案2
0 2020-10-14 10:26:57

如何放置一个贴在视频底部并具有响应性的 div

问题描述

2 个解决方案

解决方案1 0 2020-10-14 10:21:00

解决方案2 0 2020-10-14 10:26:57

解决方案1
0 2020-10-14 10:21:00

解决方案2
0 2020-10-14 10:26:57