CODEWITHSUNDEEP
javascript
Taarush Jain
Taarush Jain

Reputation: 5

Unable to add video in my website

Some problem with the width and height, it shows up on the full page . Also my video is working on firefox but not on chrome

<div id="videoTop" style="position:fixed;  right: 0px; min-width: 100%; min-height: 50%; width: auto; height: auto; z-index: 1; overflow:hidden;">

    <script>
        if (jQuery.browser.mobile) {
            $('div#videoTop').remove();
        }
        else { }
    </script>

    <video id="videoBG" preload="auto" autoplay="autoplay" loop="loop" muted="muted" volume="0" tabindex="0" style="position: fixed;  right: 0px; min-width: 100%; min-height: 30%; width: auto; height: auto; z-index: -2; overflow: hidden;">
        <source src="Images/Wildlife.mp4" type="video/mp4" codecs="&quot;avc1.42E01E, mp4a.40.2&quot;">
        <source src="/assets/1550/allure-homepage.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">
    </video>
</div>

Upvotes: 0

Views: 57

Answers (2)

mc01
mc01

Reputation: 3780

Your jQuery code will remove the entire block when true since there's only 1 <div> tag. Is that what you want, and is mobile browsers where you're encountering the error?

For non-mobile browsers, try removing the codecs, which aren't usually necessary & which appear to include unnecessary quotation marks and semi-colons that are breaking your code above.

 <video id="videoBG" preload="auto" loop="loop" muted="muted" volume="0" tabindex="0" style="position: fixed; right: 0px; min-width: 100%; min-height: 30%; width: auto; height: auto; z-index: -2; overflow: hidden;">
     <source src="Images/Wildlife.mp4" type="video/mp4">
     <source src="/assets/1550/allure-homepage.webm" type="video/webm">
 </video>

If not that, confirm your file paths to the videos. Why are they totally different videos and different subfolders ("Images" vs "assets") for different browsers?
Finally, is there other content? Why z-index of -2? Could something else be covering the video?

Upvotes: 0

Dunney
Dunney

Reputation: 91

If == true you're removing the whole block of markup you have posted.

Upvotes: 2

Related Questions