adambwhitten adambwhitten - 3 months ago 8
CSS Question

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>




Answer

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://fiddle.jshell.net/82gz9omv/

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.