视频响应按钮

Question

因此，我一直试图通过像aldoshoes.com这样的视频获取自适应按钮

以下是我的代码。我知道这是可能的，因为我看到人们一直这样做，我似乎无法绕过逻辑。 如果你们有任何建议，我们将不胜感激！

＆＃13;

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查一下。

＆＃13;

＆＃13;

   .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;}
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不明白你真正想要的是什么，但我认为你试图把按钮放在视频的中心。所以，这是你的代码有点不同，并且工作。 ：）

https://fiddle.jshell.net/82gz9omv/

P.S。：z-index未设置为px。它只是一个数字，例如z-index: 99;。

P.P.S。：不要担心分辨率低于320px。自2010年以来，不再生产具有此分辨率的手机。

Answer 3

您需要将按钮附加到.holdvideo元素，并为较小的屏幕添加媒体css规则，如下所示：

＆＃13;

＆＃13;

$(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");
            });
        }
    }
});

＆＃13;

.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%);
    }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

以下代码更改应该可以解决问题。总结一下这些变化：

• 避免对按钮使用px宽度，而是在按钮的包装上使用%。在您的情况下，按钮1＆amp; 2

• 正如您所看到的，我已将 holdbutton div分别降至50％＆amp;使用left定位它们（​​仅第二个包装器需要，因为默认情况下第一个已经定位）

• 然后在按钮上使用position: relative;并使用left: 25%让它们在包装中居中对齐。还将宽度单位更改为％。

＆＃13;

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;