cptmuesli

For now I took the hacks and cleaned it up a littile.

• removed the .lyte:hover .play{background-position:0 -65px}
• edited the gray play button from lytesprite to just be empty.

And the result looks acceptable.

If you are interested in supporting this, here are the code snipplets:

<div class="consent"> 
  <p><span class="consent-text"> 
    I agree to have content from Youtube displayed to me.
  </span></p>
</div>
<div class="play">
  <p class="consent-button-text">Okay</p>
</div>

css:

.consent-text {
 text-align:center;
 background-color:rgba(31,31,31,230);
 color: white;
 font-size:16px;
 height:auto;
}
.consent {
 text-align:center;
 padding:135px 10px 50px 10px
}
.lyte .play {
 background-image:url(bU + button_empty.png);
 line-height: 63px;
 text-align: center;
}
.consent-button-text {
 color: white;
 vertical-align: middle;
}

Okay I have a precise problem description now:

The reasoning is: An user presses the play button to watch a video, not to consent to data protection agreements. So we need to add a consent button before the user can play the video. Is it possible to add this as an overlay? I will provide a suiting text (in German and English) if necessary.

My js/web development skills are not good enough to provide the corresponding code.

Hi @optimizingmatters,

I am currently clarifying with our data protection officer how “active informed consent” is interpreted. If we have a clear point, I’ll tell you what exactly is required. This should be in a few days.

Underneath the video is too low, it must at least be above the play button, so that the user notices it before he clicks play. But the css hack looks better than my solution and should replace my php changes.