[CSS][Javascript]

[Hazy125]

I don't post topics unless the problem is doing my head in. The problem is doing my head in.

 

I'm basically trying to create a custom video player to suit the look of the rest of the site. 

 

Site in question: http://kathy.hazy125.com/material.php (ignore the domain name, Kathy is the person I'm getting layout opinions from)

 

The problem specifically is that for whatever reason, once the play button is clicked, it doesn't transition down to the bottom left. It just jumps down which is obviously not desired. The thing is, the :hover works just fine. When you hover over the button it does that transition. Another part of the site, the slide in menu, also uses javascript to change the style, thus triggering the transition. So, I simply cannot figure out why it isn't working out for me.

 

Le code:

/*The CSS */.play-full{	position: absolute;    margin: auto;	z-index: 46;	-webkit-transition: all ease .2s;    -moz-transition: all ease .2s;    -o-transition: all ease .2s;    transition: all ease .2s;}.play-full:hover{	cursor: pointer;	border-radius: 50%;}//The JSfunction playCurrent(){	//setTimeout(function(){				//document.getElementById('videoplayer').play();			  //}, 1000);	document.getElementById('playButton').style.top = "";	document.getElementById('playButton').style.right = "";	document.getElementById('playButton').style.width = "30px";	document.getElementById('playButton').style.height = "30px";	}<!-- The HTML --><article class="no-pad">    	<div class="video-wrapper">    		<img src="play.jpg" class="play-full" onClick="playCurrent();" id="playButton" style="top: 0;left: 0;right: 0;bottom: 0;">            <video id="videoplayer">                <source src="Kathy_Christmas.mp4">                Your browser does not support HTML5 or the mp4 video container            </video>        	<div id="video-controls"></div>        </div>        <div class="low-pad">        <h3>Video Test </h3>        <p>I'll be using this "article" to test my video functions, specifically, the custom material design video player. Maybe with variable based colours, although I imagine that variable based will be served that way from PHP or via an Asynchronous Javascript And XML request</p>        </div>    </article>

Although, currently at least, this is just a test site. So literally everything is on one page. no external CSS or JS. So you can pretty much see everything else you might want by inspecting element etc.

[colonel_mortis]

Your problem seems to be that rather than changing the top and right styles to their new position, it is just clearing them. This means that they can't be transitioned because the browser can't detect the end point. Instead of

    document.getElementById('playButton').style.top = "";    document.getElementById('playButton').style.right = "";

you should do

    document.getElementById('playButton').style.top = "550px";    document.getElementById('playButton').style.right = "1200px";

(obviously you'll need to tweak this as appropriate).

[Hazy125]

Your problem seems to be that rather than changing the top and right styles to their new position, it is just clearing them. This means that they can't be transitioned because the browser can't detect the end point. Instead of

    document.getElementById('playButton').style.top = "";    document.getElementById('playButton').style.right = "";

you should do

    document.getElementById('playButton').style.top = "550px";    document.getElementById('playButton').style.right = "1200px";

(obviously you'll need to tweak this as appropriate).

I didn't think of that. But how would I even go about doing this for my current setup, given that it's fluid

[colonel_mortis]

I didn't think of that. But how would I even go about doing this for my current setup, given that it's fluid

That's a difficult one, but you could try something like

document.getElementById("videoplayer").getBoundingClientRect().width

to get the video player width (height is the same, but .height), then adjust the play button final location accordingly. It is a bit fiddly to make it work though, and you might need to change both the top and bottom values to get a reasonable solution.

[TAtari]

The problem is in the way you centred the play button it will not allow for position transition.

Here is an easy way of doing it:

Css changes:#videoWrapper{	top: 0;	left: 0;	position: relative;}#playButton {	position: absolute;    	z-index: 46;	-webkit-transition: all ease .2s;    -moz-transition: all ease .2s;    -o-transition: all ease .2s;    transition: all ease .2s;		/* Set the big button styles */	width: 100px;	height: 100px;	left: 50%;	bottom: 50%;	margin: 0 0 -50px -50px;		}#videoWrapper.playing #playButton {	/* Small button at bottom left */	left: 0;	bottom: 0;	margin: 0;	width: 30px;	height: 30px;}Html:<div id="videoWrapper" class="video-wrapper">	<img src="play.jpg" class="play-full" onClick="playCurrent();" id="playButton">	<video id="videoplayer">		<source src="Kathy_Christmas.mp4">		Your browser does not support HTML5 or the mp4 video container	</video>	<div id="video-controls"></div></div>JS:function playCurrent(){  $('#videoWrapper').addClass('playing');}

You can see it in action: http://iis.tatari.se/ltt/hazy125.htm

[Hazy125]

-snip-

 

Thanks man, that solution works quite well. 

 

Also, thanks for your help too @colonel_mortis