javascript - 视频响应式按钮

Question

所以我一直在尝试通过类似于 aldoshoes.com 的视频获得响应按钮

下面是我的代码。我知道这是可能的，因为我看到人们一直这样做，但我似乎无法理解其中的逻辑。 如果你们有任何建议，我们将不胜感激!

.holdbutton1 {
	z-index:899px;
	position:absolute;
	top:10%;
	left:25%;
}

.holdbutton2 {
	z-index:899px;
	position:absolute;
	top:10%;
	left:800px;
}

.btnFall {
	-webkit-border-radius: 5;
  	-moz-border-radius: 5;
  	border-radius: 5px;
  	color: #ffffff;
	width:250px;
  	font-size: 14px;
  	background: #772539;
  	padding: 10px 20px 10px 20px;
  	text-decoration: none;}

	.btnFall:hover {
  	background: #959356;
  	text-decoration: none;}

<script type="text/javascript">$(document).ready(function(){var $video_content=$("video");var $play_button=$(".adl-play-btn");function setVideoBackToNormal(){if($video_content.get(0).played.length>=0){$video_content.css("height","auto");$play_button.css("top","35%");}}function isOnSmallScreen(){return $(window).width()<768;}if(isOnSmallScreen()){if(navigator.userAgent.match(/Gecko/)&&navigator.userAgent.match(/Android/)&&navigator.userAgent.match(/rv:/)){$video_content.css("height","auto");}else{$video_content.attr("poster","http://media.aldoshoes.com/content/fw16/august-refresh/prod/assets/video/loop/fallback.jpg");$video_content.css("height","400px");$play_button.css("display","block");$video_content.add($play_button).on("click",function(){$video_content.get(0).play();$video_content.get(0).webkitEnterFullscreen();$video_content.bind("webkitfullscreenchange fullscreenchange",function(e){var state=document.fullScreen||document.webkitIsFullScreen;var event=state?"FullscreenOn":"FullscreenOff";if(event=="FullscreenOff"){$video_content.get(0).pause();setVideoBackToNormal();}});setVideoBackToNormal();});}}else{if($(window).width()>768){$(window).on("resize",function(){$video_content.css("height","auto");$play_button.css("display","none");});}}});</script>
<div class="holdbutton1">
<div class="btnFall" style="text-align:center;">Shop Women's</div>
</div>
<div class="holdbutton2">
<div class="btnFall" style="text-align:center;">Shop Women's</div>
</div>
<div class="holdvideo" style="max-width:1140px; margin: 0 auto;">
<video autoplay loop preload="auto" width="100%"><source src="http://www.adambwhitten.com/obsw/homepagevideo1.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" /><source src="http://www.adambwhitten.com/obsw/homepagevideo1.webm" type="video/webm; codecs=vp8,vorbis" />Your browser does not support the video tag.</video>
</div>

Answer 1

我不明白你真正想要什么，但我认为你是想把按钮放在视频的中央。因此，您的代码有点不同，并且可以正常工作。 :)

https://jsfiddle.net/82gz9omv/1/

P.S.: z-index 不是用 px 设置的。它只是一个数字，如 z-index: 99;。

P.P.S.:不要担心小于 320 像素的分辨率。自 2010 年以来不再生产具有此分辨率的手机。