Closed Captioning in Church Online Platform v4

Update log:
Dec 19: 2022: I further changed the Resi embed to 54% height as 54.5% still didn't work for very specific browser widths. Also I added a note about the embed URLs sometimes including "&type=event" after the unique ID. Something to pay attention to... My split Left/Right feeds they made custom embed IDs/codes for, do NOT have this as part of the src URL, but all other events I see do use it. Failing to add it if needed means your event will pull a black screen saying there are no broadcasts and to check back later.

Dec 12, 2022: I changed the Resi embed from 56.25% to 54.5% height to account for new changes on the ChOP site's layout. This shrinks the player slightly and adds a bit more black margin to the sides, but ensures the button is seen without a vertical scrollbar appearing.

Apr 10, 2022: I changed the position of the button to under video window, bottom left, instead of top left overlaying video. ChOP site layout changed and broke the button's position, causing it to float out of view depending on viewer's page size. This fixed position is a more reliable placement.

Aug 21, 2020: Initial post.

-----

Description:
This is a turn-key solution for any churches using Church Online Platform v4 with Resi (formerly LivingAsOne) as a video provider with two embed codes (regular and closed captioning in our case, but it can be adapted for whatever) who wish to add a CC ON/OFF toggle button that fades in/out with mouseover just like the normal playback controls on the player.

There are 3 areas you will need to change to your own embed info, which are commented out accordingly with 11111 and 22222 placeholders:

-----


<script src="https://use.fontawesome.com/releases/v5.13.1/js/all.js" data-auto-replace-svg="nest"></script>
<style type="text/css">
body { background: black; margin: 0; padding: 0; }
.caption { float: left; margin-right: 2px; color: rgb(200, 200, 200); }
#navbar button { display: flex; flex-direction: column; top: 50%; left: 0; -moz-box-align: center; align-items: center; padding: 0px 2px; line-height: 16px; color: rgb(200, 200, 200); font-size: 13px; text-transform: uppercase; white-space: nowrap; position: relative; font-weight: 600; border: medium none; background-color: rgba(0, 0, 0, 0.5); outline: currentcolor none medium; overflow: visible; margin: 0px; cursor: pointer; }
.off { color: rgb(200, 200, 200); }
.on { color: lightgreen; }
#player iframe { max-height: calc(100vh - 20px) !important; }
#navbar { background-color: rgba(255,255,255,0.5); display: flex; justify-content: center; z-index: 1; opacity: 0; left: 20px; position: absolute; margin: 5px auto 0 auto; }
@media only screen and (max-width: 1023px) { #navbar { bottom: 1px; margin: 0 auto; opacity: 1 !important; } }
</style>
<!-- Resi Embed Code (check if your RESI embed has the &type=event text, add if needed) -->
<div id="player" style="position:relative;overflow:hidden;padding-top:54%;">
<iframe allow="autoplay; fullscreen" allowfullscreen="true" src="https://control.resi.io/webplayer/video.html?id=11111111-1111-1111-1111-111111111111" style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"></iframe>
</div>
<!-- places the caption button -->
<div id="navbar">
  <div class="caption">
  <i class="far fa-closed-captioning"></i></div>
<button id="togglecc"><span class="off">off</span></button>
</div>
<script>
// This fades the CC ON/OFF button in/out with the mouseover of the player for screens 1024px on up, similar to the native playback controls. Mobile is always visible due to iOS not showing this properly.
let btn = document.getElementById("togglecc")
if (window.innerWidth > 1023) {
    document.getElementById("player").addEventListener("mouseover", mouseOver);
    document.getElementById("navbar").addEventListener("mouseover", mouseOver);
    document.getElementById("player").addEventListener("mouseout", mouseOut);
    document.getElementById("navbar").addEventListener("mouseout", mouseOut);
    function mouseOver() {
      document.getElementById("navbar").style.opacity = "1";
    }
    function mouseOut() {
      document.getElementById("navbar").style.opacity = "0";
    }
}
// This toggles the player source video and the text that reads OFF/ON when the button is clicked.
btn.addEventListener('click', (e) => {
    console.log('target',e.target.innerHTML)
  toggle()
})
function toggle() {
  let v = document.getElementById("togglecc");
    let vp = document.getElementById("player");
  if (v.innerHTML == '<span class="off">off</span>') {
    v.innerHTML = '<span class="on">on</span>';
    // replace this with your player embed for your CAPTIONED feed (check if your RESI embed has the &type=event text, add if needed)
    vp.innerHTML = '<iframe allow="autoplay; fullscreen" allowfullscreen="true" src="https://control.resi.io/webplayer/video.html?id=22222222-2222-2222-2222-222222222222" style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"></iframe>';
    } else {
    v.innerHTML = '<span class="off">off</span>';
    // replace this with your player embed for your NON-CAPTIONED feed (check if your RESI embed has the &type=event text, add if needed)
    vp.innerHTML = '<iframe allow="autoplay; fullscreen" allowfullscreen="true" src="https://control.resi.io/webplayer/video.html?id=11111111-1111-1111-1111-111111111111" style="position:absolute;top:0;left:0;width:100%;height:100%;border:none;"></iframe>';
  }
}
</script>