因此，我一直试图通过像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>
答案 0 :(得分：1)
检查一下。
.holdbutton1 {
z-index:899;
margin: 10px;
}
.holdbutton2 {
z-index:899;
margin: 10px;
}
.button-wrapper{
position:absolute;
width:100%;
height: 100%;
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.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;
}
@media only screen and (max-width: 756px){
.button-wrapper{flex-direction: column;}
}<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="holdvideo" style="max-width:1140px; margin: 0 auto; position:relative">
<div class="button-wrapper">
<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>
<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>
答案 1 :(得分：1)
我不明白你真正想要的是什么，但我认为你试图把按钮放在视频的中心。所以，这是你的代码有点不同，并且工作。 ：）
https://fiddle.jshell.net/82gz9omv/
P.S。：z-index未设置为px。它只是一个数字，例如z-index: 99;。
P.P.S。：不要担心分辨率低于320px。自2010年以来，不再生产具有此分辨率的手机。
答案 2 :(得分：0)
您需要将按钮附加到.holdvideo元素，并为较小的屏幕添加媒体css规则，如下所示：
$(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");
});
}
}
});.holdvideo {
position: relative;
}
.holdbutton1 {
z-index:899px;
position:absolute;
top:10%;
left:0;
width: 50%;
}
.holdbutton1 .btnFall {
float: right;
transform: translateX(-50%);
}
.holdbutton2 {
z-index:899px;
position:absolute;
top: 10%;
right:0;
width: 50%;
}
.holdbutton2 .btnFall {
float: left;
transform: translateX(50%);
}
.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;
}
@media screen and (max-width: 768px){
.holdbutton1,
.holdbutton2 {
width: 100%;
}
.holdbutton2 {
transform: translateY(110%);
}
.holdbutton1 .btnFall,
.holdbutton2 .btnFall {
margin: 0 auto;
float:none;
transform: translateX(0%);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holdvideo" style="max-width:1140px; margin: 0 auto;">
<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>
<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>
答案 3 :(得分：0)
以下代码更改应该可以解决问题。总结一下这些变化：
避免对按钮使用px宽度，而是在按钮的包装上使用%。在您的情况下，按钮1＆amp; 2
正如您所看到的，我已将 holdbutton div分别降至50％＆amp;使用left定位它们（仅第二个包装器需要，因为默认情况下第一个已经定位）
然后在按钮上使用position: relative;并使用left: 25%让它们在包装中居中对齐。还将宽度单位更改为％。
.holdbutton1 {
z-index:899px;
width:50%;
position: absolute;
top: 50%;
}
.holdbutton2 {
z-index:899px;
width: 50%;
position: absolute;
left:50%;
top: 50%;
}
.btnFall {
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
color: #ffffff;
width:50%;
position: relative;
left: 25%;
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 1</div>
</div>
<div class="holdbutton2">
<div class="btnFall" style="text-align:center;">Shop Women's 2</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>