Placing 3 elements in a , side by side

I want to do this little application :

So I want to place 2 buttons on each sides of the video.

Here's the HTML code :

<div id="slideshow" class="blockdesign">
  <input type="button" class="buttonChangeVideo" value="<" />
  <video controls src="videotest.mp4">Just a test</video>
  <input type="button" class="buttonChangeVideo" value=">" />
</div>

And here's the CSS code I wrote :

.blockdesign /* the div embracing the 3 other elements */
{
    margin: 0 5px 0 5px;
    display: inline-block;
}

#slideshow
{
    width: 854px;
    height: 100%;
}

#slideshow video /* the video */
{
    width: 84%;
    display: inline-block;
    margin: 0 auto 0 auto;
}

#slideshow .buttonChangeVideo /* the buttons */
{
    display: inline-block;
    width :8%;
    height : 100%;
    margin: 0;
}

As you can see I use 'display: inline-block;' on every element.

But when I try the code I get this :

What did I wrong?

Thank you very much for your time !