vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB5 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=262)
-   -   vB5 suggestion : video background per forum basis (https://vborg.vbsupport.ru/showthread.php?t=328600)

lange 02-17-2021 10:20 PM
vB5 suggestion : video background per forum basis
 
1 Attachment(s)
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 02-18-2021 12:08 AM
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
Code:
<vb:if condition="$vboptions['yilmazhidetextfromguest_on']  AND ($user['userid'] == 0)">
So would it be something like
Code:
<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 02-18-2021 12:35 AM
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 02-18-2021 12:57 AM
vb5 forum conditions such

HTML Code:
<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
HTML Code:
<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

HTML Code:
<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 02-18-2021 07:22 AM
Wow! Thank you very much again and again Yilmaz! :up:
edit: donation sent by Paypal (reply if you have not received it)


All times are GMT. The time now is 11:19 AM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01044 seconds
  • Memory Usage 1,738KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (3)bbcode_html_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (5)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete