Video background possible errorss (pro)

Support
#1

Hello, i want to fix a few issues i encountered while adding a video background to my site.

So, the video was first uploaded in youtube and then it has been embedded in the site.
It works fine per se, but for seome reason it takes way too much to load. while inspecting the site, i found out the site is throwing a few errors which might be the cause of the entire delay. all the errors are all related to google and to the embed player. i would like to know what am i doing wrong and what can i do to fix this issue.

#2

Hi there,

Thanks for posting in.

Please try a self-hosted video, you added this video https://youtu.be/3fPUpFE4PFQ. Although some browser like chrome supports video/youtube format (eg. <source src="https://youtu.be/3fPUpFE4PFQ" type="video/youtube">), it will still try to generate a playable format, which is the iframe. So instead, use a self-hosted video so the player will just play it right away.

Thanks!

#3

ok but that way the video is super slow!, one other question. could you please tell me why does the poster never appears before the video (while it was loading)? and also, could you give me any tips for the video to load faster?

#4

Hey @elpanda13,

The video poster’s role is to display an image when the video element is first rendered into the page. Once you click to play it, it will disappear and the video loads. You will need custom CSS to apply a background image so that you have something in the background while the video loads like this.

Keep your video as short as possible and use a video compressor. You will want to search online for this.

Thanks.

#5

i actually edited my question while you answered, hehe.

basically the video takes forever to load, in the meantime i get a gray background, even when i added the image as a background. this is a background video so i don’t get any pause/play button.

#6

Luckily, my answer applies to both scenarios but with a little twist.

The video poster’s role when using a background video is to display an alternative image on mobile. On desktop, it will not show and while the video is loading, the area is transparent. You will need custom CSS to apply a background image so that you have something in the background while the video loads like this.

Have you seen this https://youtu.be/a_N6sQ17_dE?t=12

And, used this CSS?

.x-bg {
  background: url(IMAGE_URL) no-repeat;
  background-size: cover;
}

Just keep in mind though that this uses CSS and fixing issues arising from the use of it and any enhancements are outside the scope of our support.

Hope that helps.

#7

i actually did that before i opened the thread but it doesn’t really work because it’s a parallax video. i suppose there’s another class i should add to the mix?

#8

nevermind, i found out why it didn’t work, it did have another class, but the other problem was a spelling error. thanks for the help!

#9

You’re welcome. Glad you’ve sorted it out.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.