1

I am using FullPage js plugin in on webpage with full screens video.

Below is one example from the plugin site, This works fine in FF & Chrome, But same breaks in IE as video doesnt take 100% width of the screen.

How can this be fixed

https://alvarotrigo.com/fullPage/examples/videoBackground.html

<div id="fullpage">
    <div class="section " id="section0">
        <video id="myVideo" loop muted controls="false" data-autoplay>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
        </video>
        <div class="layer">
            <h1>fullPage.js fullscreen videos</h1>
        </div>
    </div>
    <div class="section" id="section1">
        <div class="slide" id="slide1"><h1>Surprise the world!</h1></div>
        <div class="slide" id="slide2"><h1>Totally amazing!</h1></div>
    </div>
    <div class="section" id="section2"><h1>A great use <br />of videos</h1></div>
</div>


* Style for our header texts
    * --------------------------------------- */
    h1{
        font-size: 5em;
        font-family: arial,helvetica;
        color: #fff;
        margin:0;
        padding:0;
    }

    /* Centered texts in each section
    * --------------------------------------- */
    .section{
        text-align:center;
        overflow: hidden;
    }

    #myVideo{
        position: absolute;
        right: 0;
        bottom: 0;
        top:0;
        right:0;
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
        background-color: black; /* in case the video doesn't fit the whole page*/
        background-image: /* our video */;
        background-position: center center;
        background-size: contain;
        object-fit: cover; /*cover video background */
        z-index:3;
    }


    /* Layer with position absolute in order to have it over the video
    * --------------------------------------- */
    #section0 .layer{
        position: absolute;
        z-index: 4;
        width: 100%;
        left: 0;
        top: 43%;

        /* 
        * Preventing flicker on some browsers 
        * See http://stackoverflow.com/a/36671466/1081396  or issue #183
        */
        -webkit-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    /*solves problem with overflowing video in Mac with Chrome */
    #section0{
        overflow: hidden;
    }

    /* Bottom menu
    * --------------------------------------- */
    #infoMenu li a {
        color: #fff;
    }

    /* Hiding video controls 
    * See: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
    * --------------------------------------- */
    video::-webkit-media-controls {
      display:none !important;
    }

I tried few thing which didnt work and i could fine any help from internet regarding this issue

Learning
  • 19,469
  • 39
  • 180
  • 373
  • Not really a fullPage.js related issue, but an issue with full screen background videos and IE. Check this related issue: https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover – Alvaro May 25 '17 at 10:39
  • @Alvaro, so is there a solution – Learning May 25 '17 at 10:45
  • Look at the post I linked. Or at others like this one: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3 – Alvaro May 25 '17 at 10:53

0 Answers0