locked
How do I overlay a button subscribe on video play RRS feed

  • Question

  • User-2074858223 posted
    How do I overlay a button subscribe on video play, I want the button to be place by bottom left
    Friday, October 21, 2016 10:06 AM

All replies

  • User535082756 posted

    hi

    just a thought . Hope it helps. 

    video { ; z-index: 0; } p { border:none; ; top: 50px; left: 50px; color: red; font-size: 2em; border: medium solid yellow; z-index: 1; }

    .flyout-toggle { ; top: 50px; left: 50px; background: #92C7B8; /*border: solid #fff 1px;*/ border: none; outline: none; border-bottom: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #fff; box-shadow: 0 2px 5px 0 #bfbfbf; cursor: pointer; }

    http://jsfiddle.net/cJJwj/137/

    html code.

    <video width="200" height="200" controls="controls" src="http://upload.wikimedia.org/wikipedia/commons/4/43/Eisbach_surfen_v1.ogv"></video> <input type="button" class="flyout-toggle" value="example" />

    Friday, October 21, 2016 4:41 PM
  • User-1838255255 posted

    Hi micah2012 ,

    According to your description , I'm not  clear what's your means and the mean of subscribe , please describe more detail of your thought . Also I hope you can provide code you have done !

    Best Regards,

    Eric Du

    Monday, October 24, 2016 9:00 AM
  • User-2074858223 posted
    I just want to put a button called subscription on a playing video, once a user clicks on it he will be redirected
    Friday, October 28, 2016 5:56 PM
  • User2053451246 posted

    Your button will still just be an HTML element, and this example just has a text box overlay with "weeeee" in it.  Change the "weeeee" and adjust the size of the box in the css to not have extra space around your button.

    http://jsfiddle.net/GxvyG/

    Friday, October 28, 2016 8:52 PM
  • User347430248 posted

    Hi Micah2012,

    please use the code mentioned below.

    <!DOCTYPE html>
    <html>
    <style type="text/css">
    .container{
        ;
    }
    
    .container>.player-buttons{
        background: url('https://s15.postimg.org/d7f5t12ej/rss2_buttons_08.png') center center no-repeat;
        height: 128px;
        left: 40%;
        margin: -64px 0 0 -64px;
        ;
        top: 80%;
        width: 128px;
        z-index: 1; 
    }
    </style>
    <body>
    
    
    <div class="container">
        <video src="movie.mp4" width="400" height="400" type="video/mp4"></video>
        <div class="player-buttons"></div>
    </div>
    </body>
    </html>
    

    Output:

    Regards

    Deepak

    Thursday, November 3, 2016 6:52 AM
  • User-2074858223 posted
    Thanks for your answer, but let me ask, does it also work on responsive mode,?
    Thursday, November 3, 2016 11:28 AM
  • User347430248 posted

    Hi micah2012,

    yes, it will also work for responsive mode.

    you just need to set the css for your video tag and for subscribe button.

    and place the subscribe button according to video and screen size then it will display on the correct place every time.

    no matter on which screen you are trying to open.

    Regards

    Deepak

    Friday, November 4, 2016 5:41 AM