标题视频上的角度向下图标

Question

最近我在我的页面上添加了一个标题视频。现在我想要一个角度向下图标我的标题视频，它将把我带到页面的底部。

这是标题视频的代码，但我不知道在哪里添加角度向下图标。

<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
    <source src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-
content/uploads/2016/03/2016-web-loop-03.mp4" type="video/mp4"> 
    <source src="movie.webm" type="video/webm"> 
</video>

Answer 1

尝试这样。相应地设置它

<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
<source src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-content/uploads/2016/03/2016-web-loop-03.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> 
</video>
<a href="#scrolldown" class="scrolldown">Add arrow here</a>

CSS

.scrolldown{
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute;
    display: inline-block;
    width: fit-content;
}

#videobcg{
  position:relative;
}

Answer 2

参见下面的例子：

＆＃13;

＆＃13;

$('.down').on('click',function(){
 $(this).attr('href','#bot');
 $('html, body').animate({
           scrollTop: $("#bot").offset().top
         }, 1000);
 
})

＆＃13;

video{
  max-width:100%;
  position:relative;
}
.down{
  position:absolute;
  top:180px;
  left:200px;
  color: white;
  cursor:pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
    <source src="http://12982-presscdn-0-38.pagely.netdna-cdn.com/wp-
content/uploads/2016/03/2016-web-loop-03.mp4" type="video/mp4"> 
    <source src="movie.webm" type="video/webm"> 
</video>
<a class="down" href=''>Down Arrow</a>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>

<div>
  <p id="bot">
  Bottom....
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;