Video won't pause in cycle2-carousel by button

Question

I want to pause a video within the cycle2-carousel slideshow via a Button. Somehow it does not work, although it works perfectly fine with a random placed video somewhere on the page. What am I missing here? Why is my second button/function unable to pause the video in the slidershow?

Thanks in advance for your help.

function pausefirstvideo()
{
 document.getElementById('video1').pause();
}

function pausesecondvideo()
{
 document.getElementById('video2').pause();
}

.slides
{
 width: 500px;
 height: 300px;
 margin-left: 10px;
 margin-right: 10px;
}
.slides img
{
 width: 100%;
 height: 100%;
}
.slides video
{
 width: 100%;
 height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>

<button id="pause1" onclick="javascript:pausefirstvideo();">PAUSE VIDEO1</button>
<button id="pause2" onclick="javascript:pausesecondvideo();">PAUSE VIDEO2</button>

<video id="video1" controls="controls"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video>


<div class="cycle-slideshow" data-cycle-slides="> div" data-cycle-speed="500" data-cycle-timeout="8000" data-cycle-fx="carousel">
<div class="slides"><img src="http://malsup.github.io/images/beach1.jpg"></div>
<div class="slides"><video id="video2" controls="controls"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video></div></div>