View Full Version : Buttons on a Video Website HELP!!!!!!

05-18-2017, 11:42 AM
So i'm making an intro website before the website and i'm trying to get a Button to be placed centered in the middle i've coded the website and done the CSS styling already but i really need help placing a button with CSS in the middle of the video so that when you click on the button it sends you to a website.


06-11-2017, 09:54 AM
Try to search on youtube.

Bill Goldberg
06-14-2017, 08:51 AM
I think w3schools can really help you man even YouTube too.

New Perspective Studio
07-09-2017, 08:32 AM
<div class="fcontainer" style="position:relative" >
<div class="youtube-player" style="margin:10%;top:-221%" data-id="https://www.youtube.com/embed/AjZ0KbJcav0"></div>


function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;

function labnolThumb(id) {
var thumb = '<img src="images/Capture.JPG" width="767" height="510">',
play = '<div class="play"></div>'; /Edit this classes backround property to display the wanted play button /
return thumb.replace("ID", id) + play;

function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/QHfip3bH-DA";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);


New Perspective Studio
07-09-2017, 02:53 PM
<div class="video container" style="background-color:#00CC66">

<video style="position:absolute;overflow:hidden" poster="...Video.jpg"
autoplay loop> \key is to include style overflow hidden and position absolute\

<source src=".... Shockwave⁄Smoke.mp4" />


<div class="overlay button" style="position:absolute">

<a href=""> \your linking anchor\

<img src=".....new/images/price.png" />



Use these styles in your css not inline if you want...also center then overlay image with auto margin.

New Perspective Studio
07-09-2017, 02:55 PM
I posted a fix and all the coding and styling just waiting for mods to approve it mate