Player button shape

PlayerButton
Q1: How can have player button on the right (shown in the above image)?
Q2: How can I change the code such that, the player box will be minimized after the video finishes after 5 second delay?
<script>
$(function() {
  $('video').on('play', function (e) {
    // IGNORE PLAY EVENT IF ALREADY RESIZED
    if ($(this).data('oldheight') > 0) return;
  
    // SAVE THE CURRENT HEIGHT
    $(this).data('oldheight', $(this).height());
  
    // GET THE NEW HEIGHT DEFAULT TO 400 IF NOT SET
    var newheight = $(this).data('height') || 400;
  
    // SET THE NEW HEIGHT
    $(this).css({height: newheight + 'px'});
  });
  
  $('video').on('ended', function (e) {
    // GET THE OLD HEIGHT DEFAULT TO 100 IF NOT SET
    var oldheight = $(this).data('oldheight') || 100;
	
    // SET THE DEFAULT HEIGHT
    $(this).css({height: oldheight+ 'px'});
  
    // RESTORE THE FULL HEIGHT VALUE
    $(this).data('oldheight', 0);
  });
});
</script>

Open in new window

<video height="28" controls data-height="300">
		  <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
				Your browser does not support HTML5 video.
</video>

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I am not sure about the question regarding the player button - are you doing something to the video that would cause that?

To make the video revert to its original size after 5seconds requires again a small change
<script>
$(function() {
  $('video').on('play', function (e) {
    // IGNORE PLAY EVENT IF ALREADY RESIZED
    if ($(this).data('oldheight') > 0) return;
  
    // SAVE THE CURRENT HEIGHT
    $(this).data('oldheight', $(this).height());
  
    // GET THE NEW HEIGHT DEFAULT TO 400 IF NOT SET
    var newheight = $(this).data('height') || 400;
  
    // SET THE NEW HEIGHT
    $(this).css({height: newheight + 'px'});
  });
  
  $('video').on('ended', function (e) {
     var element = $(this);
     setTimeout(function() {
       // GET THE OLD HEIGHT DEFAULT TO 100 IF NOT SET
       var oldheight = element.data('oldheight') || 100;
		
       // SET THE DEFAULT HEIGHT
       element.css({height: oldheight + 'px'});
	  
       // RESTORE THE FULL HEIGHT VALUE
       element.data('oldheight', 0);
     }, 5000);
  });
});
</script>

Open in new window


All we did was wrap the ended event handler in a setTimeout - remembering to save the $(this) in a var before hand to avoid scoping issues when we run the anonymous timeout function.
Updated sample here

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you very much. Really appreciated.

Mike
Julian HansenCommented:
You are most welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.