Solved Changing background to video

[johnsamir]

The problem is that if i use incognito browser eveyrthing seems ok the video size cover all the website, it owrks as a background.
but if i don't use the browser like that the video appears very small
have added this into header.php

    <div class="video-background">
    <iframe id="bgvid" width="100%" height="100%" src="https://www.youtube.com/embed/-jK5CSXETb8?autoplay=1&mute=1&loop=1&playlist=-jK5CSXETb8&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('bgvid', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
        var playerElement = document.getElementById('bgvid');
        playerElement.style.pointerEvents = 'none';
        playerElement.style.display = 'block';
    }
</script>

because the code did not worked nor index.php, index.html
this is my style.css

@import url('https://fonts.googleapis.com/css?family=Patua+One');
body
{
    /*background: url(img/bg.png) no-repeat center top #0d0f12;*/
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    background: #0d0f12; /* Fallback background color */
}
.video-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -100;
    overflow: hidden;
}

.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensure the video is behind other content */
    overflow: hidden;
}
#bgvid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disable interaction with the video */
}

would like it to work as a background image.. but in thsi case a video

 

[El Bringy]

It seems like you're trying to create a full-page background video for your website but encountering issues with the video size when not using incognito mode. Let's troubleshoot the issue.

The problem might be related to how different browsers handle the default styles for iframes. To ensure consistent behavior across browsers, you can explicitly set the width and height of the iframe to cover the entire viewport.

Here's an updated version of your code:

<div class="video-background">
    <iframe id="bgvid" src="https://www.youtube.com/embed/-jK5CSXETb8?autoplay=1&mute=1&loop=1&playlist=-jK5CSXETb8&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>


<style>
    body {
        margin: 0;
        padding: 0;
        font-size: 13px;
        font-family: 'Open Sans', sans-serif;
        background: #0d0f12;
    }


    .video-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        overflow: hidden;
    }


    #bgvid {
        width: 100vw;
        height: 100vh;
    }
</style>

Changes made:
1. Removed duplicate .video-background definition in CSS.
2. Updated #bgvid width and height to use viewport units (vw and vh) to cover the entire viewport.

Try implementing these changes and see if it resolves the issue with the video size.

 

[johnsamir]

thank you ! works
for some reason it works on my local network but if i try from a extenral my website loads an eveyrthing in it except for the background video it stays at loading

 

[El Bringy]

did you try shift + f5 from the browser?

 

[johnsamir]

i

did you try shift + f5 from the browser?

was doing something wrong but it solved with your soluton thank you