PDA

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


Problamatic
05-18-2017, 12:42 PM
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.

http://imgur.com/a/0vffw

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

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

New Perspective Studio
07-09-2017, 09: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>
</div>

<script>

document.addEventListener("DOMContentLoaded",
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;
v[n].appendChild(div);
}
});

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);
}

</script>
</div>
</div>

New Perspective Studio
07-09-2017, 03: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" />

</video>

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

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

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

</a></div>

</div>



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, 03:55 PM
I posted a fix and all the coding and styling just waiting for mods to approve it mate


:)