<div id="slider">
        <input type="radio" name="slider" id="slide1" checked="">
        <input type="radio" name="slider" id="slide2">
        <input type="radio" name="slider" id="slide3">
        <input type="radio" name="slider" id="slide4">

        <div id="slides">
            <div id="overflow">
                <div class="inner">
                    <div class="page">
                        <video src="videos/1.mp4" class="vidos" preload="metadata" autoplay controls></video>
                    </div>
                    <div class="page">
                        <img src="images/4.gif"/>
                    </div>
                    <div class="page">
                        <video src="videos/3.mp4" class="vidos" preload="metadata"  controls></video>
                    </div>
                    <div class="page">
                        <video src="videos/1.mp4" class="vidos" preload="metadata"   controls></video>
                    </div>
                </div> <!--inner-->
            </div> <!--overflow-->
        </div> <!--slides-->

        <div id="active">
            <label for="slide1">
                <video src="videos/1.mp4"></video>
            </label>
            <label for="slide2">
                <img src="images/2.jpg"/>
            </label>
            <label for="slide3">
                <video src="videos/3.mp4"></video>
            </label>
            <label for="slide4">
                <video src="videos/1.mp4"></video>
            </label>
        </div>
    </div>