background video in iframe - play delay

[littleviking]

Hi guys,
I'm trying to use Tommy Herrman's script for responsive background video, script uses iframes and has 2 videos, one for desktop and one for mobile. Looks great but is slow to load/play - in other words the site loads but the background video is blank for a few seconds.
Is the a code for preloading?
This is the site: https://www.littlevikingproductions.com
The same video loads much faster in mobirise's own background video block but the responsiveness is terrible

[Tommy Herrmann]

Hello,

here your videos load quickly and start immediately without any large delay (maybe 1 second), even on my smartphone. Keep in mind that you are loading quite large videos, which may take some time with a slower internet connection.

If you load either of the two videos directly from "Vimeo", rather than using the iframe on the Mobirise page, the loading time here will also be just the same.

https://player.vimeo.com/video/92481649 ... rols=false

All your other Vimeo videos also take some time to load and start playing, so this is not related to Mobirise or my CSS at all.

https://www.littlevikingproductions.com/video.html

For those following along, this tutorial of mine was used for the installation:

https://www.mobirise-tutorials.com/Tuto ... ideos.html

... here is your video code, with "Video2" formatted in portrait mode for smartphones:

Code: Alles auswählen

<!-- Vimeo Video1 is autoplay, loop -->
<iframe id="video1" class="bgvid" src="https://player.vimeo.com/video/924816490?&amp;autoplay=1&amp;muted=1&amp;loop=1&amp;autopause=0&amp;controls=false" width="900" height="506" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

<!-- Vimeo Video2 is autoplay, loop and muted for smartphone-->
<iframe id="video2" class="bgvid" src="https://player.vimeo.com/video/924836279?&amp;autoplay=1&amp;muted=1&amp;loop=1&amp;autopause=0&amp;controls=false" width="320" height="569" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

Both videos are loaded simultaneously, but only one is displayed depending on the screen size with this CSS:

Code: Alles auswählen

// Media-Query for 2 different videos
@media (max-width: 767px) {
  #video1 {
    display: none;
  }
}
@media (min-width: 768px) {
  #video2 {
    display: none;
  }
}

To my knowledge, "Vimeo" does not have preload parameters. However, I don't use Vimeo at all myself.

https://help.vimeo.com/hc/en-us/article ... s-overview


I’m sorry, but I currently have no ideas on that. Perhaps someone from a Vimeo forum can provide you with a tip on whether and how pre- or faster loading is possible.

Perhaps you simply have had a poor and slow internet connection.


P.S.:

...by the way, those marked lines in my screenshot, that frame the headings, are causing an overflow on all pages when viewed on a smartphone, resulting in a horizontal scrollbar. You would need to adjust the CSS or choose a different block.

Depending on the size of the overflow, the hamburger menu—and thus the navigation—may disappear from the smartphone display.

This overflow is caused by the negative positions (-60px) on the left and right when the heading is slightly wider.

Code: Alles auswählen

h3:before {
  position: absolute;
  content: '';
  left: -60px;
  top: 0;
  margin: auto;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: currentColor;
}

h3:after {
  position: absolute;
  content: '';
  right: -60px;
  top: 0;
  margin: auto;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: currentColor;
}

This additional CSS should resolve the issue on smartphones by setting the line width to 0px on those devices.

Code: Alles auswählen

@media (max-width: 767px) {
  h3:before {
    width: 0px;
  }
  h3:after {
    width: 0px;
  }
}

[littleviking]

Thanks so much Tommy, I just had another look at the CSS and on other standard background video blocks they appear to preload the 'preview' images from Vimeo. Would that be the code blow:
.mbr-fallback-image.disabled {
display: none;
}
.mbr-fallback-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
& when (@bg-type = 'video') {
background-image: url(@fallBackImage);

If so can in add this to your amazing iframe code using 2 videos?
Cheers Steff

[Tommy Herrmann]

Hi Steff,

no, the Mobirise fallback image is, as the name suggests, an image that appears when the video fails to load.

I don't have experience with "Vimeo", so I recommend checking their resources or searching Google for a "poster" image. A poster image is one that is initially loaded before the video plays.

https://help.vimeo.com/hc/en-us/article ... ur%20video.