toggle content with different elements above a video

Test for iPad

by Jens Grochtdreis

HTML

<div class="videocnt">
    <video autobuffer controls>
      <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <div id="spanelement" class="additionalcnt">
        <div class="additionalinner">
                <p>It works like charm with a SPAN-element</p>
        </div>
    </div>
</div>

<div class="videocnt">
    <video autobuffer controls>
      <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <div id="linkelement" class="additionalcnt">
        <div class="additionalinner">
            <p>It works like charm with a link-element</p>
        </div>
    </div>
</div>

<div class="videocnt">
    <video autobuffer controls>
      <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <div id="buttonelement" class="additionalcnt">
        <div class="additionalinner">
            <p>It works like charm with a button-element</p>
        </div>
    </div>
</div>

CSS

body {padding: 20px 50px; color: #fff; font-size: 14px; font-family: Verdana, sans-serif; }
.videocnt {
    position: relative;
    margin-bottom: 20px; 
    width: 400px;}

video {
    width: 400px; 
    position: relative; 
    display: block; 
    z-index: 1;
}

.additionalcnt {
    width: auto;
    position: absolute;
    z-index: 10;
    right: 0;
    top: 10px;
    background-color: #a20000;
    padding: 20px 2px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.additionalinner.open {
    padding: 5px 20px;
    display: block;
    margin-right: 1px;
}

.additionalcnt button,
.additionalcnt a,
.additionalcnt span {
    position: absolute;
    border: none;
    padding: 0 5px 0 10px;
    background-color: #a20000;
    font-family: "Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    left: -25px;
    top: 3px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.additionalcnt button.open {
    top: 20px;
}


video,
.additionalcnt button,
.additionalcnt a,
.additionalcnt span {
    /* those hacks should target iPad */
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
}

JavaScript

// Container mit Zusatzinfos
$("#spanelement").append("<span>i</span>");
$("#linkelement").append("<a>i</a>");
$("#buttonelement").append("<button>i</button>");
$(".additionalinner").hide();


$(".additionalcnt button, .additionalcnt a, .additionalcnt span").each(function(index) {
    $(this).on("click touch", function(event) {
        $(this).toggleClass("open");
        $(this).siblings("div.additionalinner").slideToggle("fast").toggleClass("open");
        event.preventDefault();
    });
});