vB5 suggestion : video background per forum basis

[lange]

Hi,

My main retirement hobby is photography and video. Under vb5, I don't know if this can be done directly in the templates with conditionals (is there a list of vB5 conditionals somewhere on the vBulletin website?) or if it requires a vB5 mod.

I would like a video that runs full screen in the transparent parts of the forum. And on a per-forum basis. The opacity of videos is fixed by CSS.

As in the following example under 3.8.11, a silent video with sea waves breaking on the beach in the forum background with an opacity of 0.3.

[Dr.CustUmz]

You should be able to do this by placing the code in the template, I have not touched vb5 honestly, but looking at a bit from one of yil's products it looks like conditionals are the same as vb4

<vb:if condition="$vboptions['yilmazhidetextfromguest_on']  AND ($user['userid'] == 0)">

So would it be something like

<vb:if condition="$foruminfo['forumid'] == 2">CODE FOR FORUM 2 (background video with CSS cover)</vb:if>

No idea how templates are but I would think they kept it (sort of) similar so whatever would be the forum display template?

[lange]

Thank you very much for your conditionals & hints ! I will test them.

I think the main challenge on vB5 will be to make the videos responsive on desktop. On my vb 3.8.11, the background videos do not play on mobile, they are hidden by a div. On desktop, they are responsive. Videos are placed in forumhome and in forumdisplay ... on a per-forum basis with conditionals.

I will give you a feedback in the next days.

[yilmaz]

vb5 forum conditions such

<vb:if condition="$page['channelid'] == 344">
CODE FOR FORUM 344 (background video with CSS cover)
</vb:if>

An example demo https://www.vbyilmaz.com/z/background-video.html

<style>
#video-bg {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;
}
</style>
<video autoplay loop muted id="video-bg">
<source src="https://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4"> 
</video>

--------------- Added [DATE]1613620220[/DATE] at [TIME]1613620220[/TIME] ---------------

Fullwidth YouTube Cover demo https://www.vbyilmaz.com/z/background-video2.html

<style>
.youtube-bg {
    position: fixed;
    width: 100%;
    height: auto;
	min-height: 100%;
    overflow: hidden;
}
.youtube-bg::before {
    content: "";
    display: block;
    background: var(--primary_color);
    background: linear-gradient(45deg, var(--primary_color_alpha) 0%, var(--secondary_color_alpha) 100%);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.youtube-bg #player {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 180%; /* Adjust this between 150% and 200% */
  min-height: 180%; /* Adjust this between 150% and 200% */
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}
.
</style>
<div class="youtube-bg">
    <div id="player" data-id="0Icc5dPbE7E"></div>
</div>
	
<script>
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';

var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        width: '100%',
        height: '100%',
        playerVars: {
            autoplay: 1,
            loop: 1,
            controls: 0,
            showinfo: 0,
            autohide: 1,
            modestbranding: 1,
            mute: 1,
            suggestedQuality: 'default',
            origin: 'https://www.vbyilmaz.com/'
        },
        videoId: document.getElementById('player').dataset.id,
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
}

var done = false;

function onPlayerStateChange(e) {
    var id = document.getElementById('player').dataset.id;

    if (e.data === YT.PlayerState.ENDED) {
        player.loadVideoById(id);
    }
}
</script>

[lange]

Wow! Thank you very much again and again Yilmaz! :up:
edit: donation sent by Paypal (reply if you have not received it)