0

I have button on my website in a container just like my example here: https://jsfiddle.net/j8z7hbc3/3/

Now when I click on the button, because of the overflow:hidden the amount is not fully visible
Is there a way to fix it?

<div class="container">

   <div class="video-wrapper-absolute">
      <div class="video-wrapper">
         <iframe width="560" height="315" src="https://www.youtube.com/embed/C2VjWtMbrzQ?version=3&loop=1&playlist=C2VjWtMbrzQ&autoplay=1&showinfo=0&vq1080" frameborder="0" allowfullscreen></iframe>
      </div>
   </div>

   <div class="coupon"> 
      <div class="button">GET COUPON</div>
      <div class="amount" style="display:none;">25% OFF</div>
   </div> 

</div>

CSS:

.container { position:relative; width:100%; height:200px; overflow:hidden; }    

.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#ytplayer { width:100%; height:100%; }

.coupon { background:orange; margin-top:158px; float:left; position:relative; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }

using clearfix didn't work in this case for me

Energ
  • 1
  • 2
  • Possible duplicate of [Make child visible outside an overflow:hidden parent](http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent) – fnune Sep 03 '16 at 01:23
  • I saw that already, I tried that code but in this case the clearfix isn't working – Energ Sep 03 '16 at 01:46

1 Answers1

0

You could make it visible as seen in this example: https://jsfiddle.net/aukgf9qs/

My changes to your CSS were moving all container class styles to .video-wrapper-absolute, since I think you just want to hide the overflow of your video. Additionally I have set buttons position: absolute; and changed the margin-top to a just top value, since it is using absolute positioning now.

Full CSS:

.video-wrapper-absolute { position:absolute; top:0; left:0; right:0; bottom:0;position:relative; width:100%; height:200px; overflow:hidden; }
.video-wrapper { position:relative; padding-bottom:56.25%; height:0; }
.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#ytplayer { width:100%; height:100%; z-index:-1; }

.coupon { background:orange; top:158px; float:left; position:absolute; }
.button { padding:6px; text-align:center; font-weight:bold; cursor:pointer; }
.amount { background:purple; color:#fff; padding:6px; text-align:center; }
west efan
  • 579
  • 4
  • 7
  • but then if I'll put content inside of the container it's not on the video, it's above it – Energ Sep 03 '16 at 01:45
  • You can also use absolute positioning for that as well, unfortunately I don't know where you added your content, so here is just a small example: https://jsfiddle.net/aukgf9qs/3/ You can also create a container overlaying your video and add your content then, this will prevent rewriting all for each new html tag you use. – west efan Sep 03 '16 at 01:55
  • yes, but then it wouldn't bee responsive or just not a good idea to start deal with the content to be absolute because I have more that just 1 line, basically I just want a video to be in a background of a div – Energ Sep 03 '16 at 02:07