Index Video

[middlemann]

Hello,

I have a video on the home page that i compressed to 227 MB but it still takes too long to load. Is there a way to either:

1. display a background image until it loads
2. embed a youtube video or other CDN link to play the video
3. or any other ideas I’m not thinking of

to dramatically decrease the time it takes for the video to start playing?

---

[Support]

Hello, my suggestion is to convert the video for the web, reduce quality, remove audio, change resolution to 720p (max).

https://www.freeconvert.com/
https://www.video2edit.com/compress-video
(or similar)

---

[middlemann]

i’ve rendered the video at 720p and removed the audio.
i can’t compress it or render at lower resolution because it looks horrible.
video is still 126 MB and takes 10 seconds to load.

i need to display a BG image while it loads (minimum)
or better: host it somewhere so it can cache and embed it in the site for instant playback

also how do I align in vertically so that the top isn’t cut off?

---

[Support]

This reply has been marked as private.

[middlemann]

does it have to be vimeo? can’t i use youtube? I already have thousands of videos up on youtube…

---

[Support]

It must be Vimeo because Youtube has ads and its own controls that can’t be disabled.

---

[middlemann]

if I host the video on my server, is there a way to use .mp4, .mov etc so different devices that won’t play mp4 can see the mov and vice versa?

---

[middlemann]

im asking because the video isn’t playing on any ios devices

---

[Support]

Hello, it’s because some IOS devices comes with autoplay for html5 video disabled by default.

For Vimeo video it will work, check this page for tests in your device: https://codepen.io/JenyaNem/pen/abveJgp

---

[middlemann]

so vimeo is the ONLY solution??
i really don’t need another subscription – especially for a single video and i already have thousands on youtube.
there has got to be another option

---

[Support]

This reply has been marked as private.

[middlemann]

i got the code all wired up – video is displaying perfectly on iphone but i can’t get it to go fullscreen on android or my laptop

---

[middlemann]

<section id="home" class="section border-0 video overlay overlay-show overlay-op-4 m-0 vimeo-background" style="height: 100vh; background-color: #000;">
                    
                    <iframe src="https://www.youtube.com/embed/iPmRZjTK5v0?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
                    <div class="container position-relative z-index-3 h-100">
                            <div class="row align-items-center h-100">
                                <div class="col">
                                    <div class="d-flex flex-column align-items-left justify-content-left h-100">
                                        <h1 class="text-color-light font-weight-extra-bold text-12 line-height-1 mb-2 appear-animation" data-appear-animation="blurIn" data-plugin-options="{'minWindowWidth': 0}">PHOENIX <span style="color: #DE2A29;">JKD</span></h1>
                                        <h1 class="text-color-light text-5 line-height-5 font-weight-medium mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
                                            Brazilian Jiu Jitsu  <span style="color: #DE2A29;">|</span>  Jeet Kune Do  <span style="color: #DE2A29;">|</span>  Filipino Kali  <span style="color: #DE2A29;">|</span>  Navy Seal Combatives
                                        </h1>
                                        <p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 1000, 'minWindowWidth': 0}">Shahram Moosavi  |  Tempe, Arizona</p>
                                    </div>
                                </div>
                            </div>
                            <a href="#main"></a>
                        </div>
                 </section>

.vimeo-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.vimeo-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .vimeo-background iframe {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .vimeo-background iframe {
    width: 177.78vh;
  }
}

---

[Support]

This reply has been marked as private.

[middlemann]

not on mine. the video is super small in the upper left corner. 3 android devices and two windows machines

---

[Author]

Posts