Media Overlay component

Customization Theme component
11

We just installed this so users could watch impeachment hearings without having to have another window open and it was such a hit (one comment was “This is very convenient. Amazing. This is by far the best forum interface I’ve ever experienced.”) that people on phones and tablets wanted it too. And since you can’t have multiple windows open on your mobile device, it’s a great feature to have.

To enable it on tablets and phones, just remove no-touch from lines 64 and 82 of Common CSS, and then resize the player on smaller screens with something like:

@media (max-width: 1024px) {
    #media-overlay,
    #media-overlay iframe{
        width: 400px;
        max-height: 225px;
    }
}
@media (max-width: 768px) {
    #media-overlay,
    #media-overlay iframe{
        width: 320px;
        max-height: 180px;
    }
    #media-overlay {
        &.dock-right {
            right: 10px;
        }
        &.dock-left {
            left: 10px;
        }
    }
}
@media (max-width: 480px) {
    #media-overlay,
    #media-overlay iframe {
        width: 240px;
        max-height: 135px;
    }
    #media-overlay {
        &.dock-right {
            right: 0px;
        }
        &.dock-left {
            left: 0px;
        }
    }
}

On touch devices, long-press = hover to bring up the control icon or the media controls, and then tap somewhere else to hide it again.

I was going to leave it off phones, but it’s still useful on a phone because you can listen to the audio with the player collapsed.

I assume this is a known limitation, but YouTubes won’t play audio when collapsed, and if you start to play a YouTube from the post and then decide to pop it out, there is no way to play the video in the floating window. You have to pop it out first without playing it, and then you can play it in the floating window.

5 Likes