logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 05-18-2017, 12:42 PM   #1
Problamatic
 
Join Date: Mar 2017
Posts: 1
Angry Buttons on a Video Website HELP!!!!!!

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
Problamatic is offline   Reply With Quote
Old 06-11-2017, 10:54 AM   #2
andrewetheridge
 
Join Date: Jun 2017
Posts: 14
Default

Try to search on youtube.
andrewetheridge is offline   Reply With Quote
Old 06-14-2017, 09:51 AM   #3
Bill Goldberg
 
Join Date: Jan 2017
Posts: 39
Default

I think w3schools can really help you man even YouTube too.
Bill Goldberg is offline   Reply With Quote
Old 07-09-2017, 09:32 AM   #4
New Perspective Studio
New Perspective Studio's Avatar
 
Join Date: Jul 2017
Location: east london
Posts: 16
Default

<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 is offline   Reply With Quote
Old 07-09-2017, 03:53 PM   #5
New Perspective Studio
New Perspective Studio's Avatar
 
Join Date: Jul 2017
Location: east london
Posts: 16
Default Found your fix

<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.

Last edited by edbr; 07-09-2017 at 04:27 PM..
New Perspective Studio is offline   Reply With Quote
Old 07-09-2017, 03:55 PM   #6
New Perspective Studio
New Perspective Studio's Avatar
 
Join Date: Jul 2017
Location: east london
Posts: 16
Default Fix

I posted a fix and all the coding and styling just waiting for mods to approve it mate


New Perspective Studio is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:07 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com