Announcement

Collapse
No announcement yet.

vB5 suggestion : video background per forum basis

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Font Size
    #1

    vB5 suggestion : video background per forum basis

    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.
    Attached Files
    Last edited by yilmaz; 02-18-2021, 04:56:53.
    Similar Threads

  • Font Size
    #2
    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>

    Comment

    Thread Information

    Collapse

    Users Browsing this Thread

    There are currently 1 users browsing this thread. (0 members and 1 guests)

      Those who read this thread

      Collapse

      Members who have read this thread: 0

        Working...
        X
        0x0