CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
adambwhitten
adambwhitten

Reputation: 116

Responsive Buttons Over Video

So I've been trying to get responsive buttons over a video kind of like aldoshoes.com

Below is my code that I have. I know it's possible because I see people do it all the time, I just can't seem to wrap my head around the logic. If you guys have any suggestions they would be greatly appreciated!

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

Upvotes: 0

Views: 1144

Answers (4)

Claudio Bonfati
Claudio Bonfati

Reputation: 503

I didn't understand what you really want, but I think that you was trying put he buttons on center of the video. So, here is your code a little different, and working. :)

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

P.S.: z-index is not set with px. It is only a number, like z-index: 99;.

P.P.S.: Dont worry with resolutions less then 320px. Is isn't anymore produced cellphones with this resolutions since 2010.

Upvotes: 1

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

The below code change should do the trick. To summarise the changes:

  • avoid using px width to the button, instead use % on the wrapper of the buttons. In your case the holdbutton 1 & 2.

  • As you can see I have spilt the holdbutton divs to 50% each & positioned them using left (only required for the second wrapper as the first is already positioned by default)

  • Then use position: relative; on the buttons and use left: 25% to get them center align within their wrappers. Also changed the width unit to %.

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

Upvotes: 0

xxxmatko
xxxmatko

Reputation: 4142

You need to append the buttons to the .holdvideo element, and add media css rule for smaller screens like this:

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

Upvotes: 0

rmarif
rmarif

Reputation: 548

check this out.

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

Upvotes: 1

Related Questions