Home Page Hero Videos – Speed It Up – Episode 1

What are we learning about today?

Joining me today is the incredible Sabrina Zeidan, a renowned expert in speeding up WordPress websites. In today’s episode, titled “Home Page Hero Videos” Sabrina will be sharing valuable insights and practical tips to optimise your home page hero videos.

But first, let’s get to know Sabrina a bit better. She recently moved and is currently relying on her mobile phone signal to bring you this show, so she really does need sites to be optimised! She’s passionate about helping you solve confusion and puzzles related to website speed and functionality.

We invite you to submit your websites for advice, and you can do that by going to the ‘Speed It Up’ submission page.

In this episode, Sabrina starts by exploring the concept of working with videos that are background videos and shares ideas on how to save time when rendering videos for your website. She emphasises the importance of prioritising the loading speed of background videos on the first screen, providing valuable recommendations to optimise the loading process.

Sabrina discusses the significance of compressing videos to reduce file size without compromising quality. She dives into the details of optimising video delivery, suggesting strategies for loading videos directly from HTML tags instead of relying on JavaScript or external platforms like YouTube.

The episode delves into the importance of removing unnecessary content from the first screen, the optimisation of frame rates for smooth video playback, and the use of image placeholders to enhance loading time. Sabrina also addresses the challenges of delivering the best content to users with varying screen sizes, discussing the significance of prioritising the majority of users’ experiences.

She shares her own experiences and challenges, as she is currently living in a location with a slow internet connection and no electricity. This unique perspective highlights the importance of considering website performance and the impact on users with slower internet connections.

So, get ready for some practical tips and tricks from Sabrina Zeidan. Don’t hesitate to grab a pen and paper to jot down some valuable insights that you can immediately implement on your own WordPress website. Let’s dive in and speed up those home page hero videos!

Overview:

[00:02:25] Sabrina offers website advice through submissions.

[00:05:29] Windy, open door!!!! Website access for demo.

[00:08:18] Optimize loading of website with video: prioritizing content.

[00:11:50] Load YouTube videos directly from website HTML.

[00:16:58] Server not from YouTube, avoid lazy loading, delay everything else. Compress videos without losing quality. Sacrifice length for background videos. Consider size for desktop only.

[00:18:37] Size of screens affects website video performance.

[00:21:49] Strip audio, improve video quality but blur.

[00:26:13] Smooth videos require more frames per second.

[00:29:48] Use video’s first frame as picture placeholder. Load image first, then video for smoother transition. Compress and blur image for optimization.

[00:32:49] Check devices and theme setup, size videos properly.

[00:37:47] CDN for video is great, cheaper than Vimeo, natively in WordPress, affordable options include Bonnie CDN and Cloudflare.

[00:39:01] Offloading videos saves time by prefetching domains.

[00:41:57] New subject next week, 3 PM Thursday.

Read Full Transcript

[00:00:03] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30 percent off new purchases. Find out more at go dot me forward slash WP Builds.

Hello. Hello. Hi, Sabrina. How are you doing?

[00:00:39] Sabrina Zeidan: Hi, Nathan. I'm good. Thank you.

[00:00:40] Nathan Wrigley: How are you? Yeah, good. Thanks. Yeah. It's it's the first time we've done this. It's it's a new show. It's called speed it up and it's called the speed it up show or something like that. We, whether or not we stick with that title doesn't really matter, but there.

Over there, look is Sabrina Zeidan. She's joining us from Spain. And tell us a little bit about where you are. Go on, use up just a few seconds introducing yourself and your new location and all the fun that is.

[00:01:11] Sabrina Zeidan: Thanks, Nathan. I'm Sabrina Zeidan and my daily work is to speed up WordPress websites.

And ironically, right now I'm in the place doing this live show in the place that has very slow internet connection because I'm in the middle of the nowhere of nowhere in the house with no electricity and with a weak mobile signal, I made an amplifier to make signal better so we can do this show.

But I'm now my I'm representing now people I'm working for because, what it's very easy not to care about performance. When you have fiber with 500 megabits going into directly into your computer. It's very easy not to care if the websites are slow, if they're loading.

Fast and mobile or something, but in their environment like these, feel the pain of people who get slow internet connections. That's a really good point. Yeah. Yeah. It gives me more motivation to work on a performance.

[00:02:25] Nathan Wrigley: That is really fascinating. So Sabrina's just moved where she is and she's using her mobile phone signal in order to make this work and obviously that's our proportion of the world use the internet.

So the endeavor of this show, really, it's it's, we're going to meet weekly this time, hopefully each week, there'll obviously be a few. Periods where, our calendars don't work perfectly, but the idea is that if you want to get some advice from Sabrina, then you can submit your website a bit like we do with peach and area and her show where she talks about UI and UX.

The idea is that if you've got a website and you're maybe puzzled or you're a bit confused, or you just. Want some one on one advice on how to speed up your website? That is going to be possible. In order to get us, let's say, for example, you've got a site is three quarters built and you just want Sabrina to have a look at that.

That's fine, but you might be thinking to yourself how do I actually get that submitted to Sabrina? We've got a page for that. So on this page basically is a form. So if you go to, wPBuilds. com forward slash slow. Now I made this slide thinking about it. I made this slide a little while ago, so change that out for speed.

WPBuilds. com forward slash speed. I just never updated that particular slide. And if you go over there, there's a form with the required fields for what Sabrina would like, name, address, email, URL and so on. And then there's various options for. If you, the sort of level of depth that you're going to allow Sabrina to have, and obviously the more access that you allow Sabrina to have, the more intelligent response to that can be.

So let me just rephrase that. So WP builds. com forward slash speed. Use that instead of slow. And I'll change that for the next time we do this show. And hopefully you can fill that out and get some great tips from Sabrina. So this being the. Sorry, say again.

[00:04:24] Sabrina Zeidan: Live, in our show. Oh,

[00:04:26] Nathan Wrigley: okay. Alright, okay.

Yeah, okay. The this being the first show we're just gonna have a little preamble. Nobody obviously has submitted their site because we didn't have that form out there. I'm gonna get Sabrina to share her screen. We're gonna keep this one fairly brief, probably in the region of about half an hour, something like that.

And then hopefully as you guys submit some user generated content for us, we'll be able to, get a bit deeper in each and every week. So shall we share the screen, Sabrina? I don't know if you want to move your move your screen into view.

[00:05:04] Sabrina Zeidan: I'd like to add a few words to this. We have few options there.

Oh, sorry. That's all right. One second. And

[00:05:24] Nathan Wrigley: she's back in the room. There she is. Back in the room.

[00:05:29] Sabrina Zeidan: It's super windy here. Oh, no. And our door has just opened. Oh, okay. So we have a few options there with different type of access that you can give to me to investigate your website live in this show. And one of the options, like the lowest.

Level of access which is no access at all. That's what we are going to do today We are going to take a website that I have no access to I have no relation to this website I just will be using as it as an example today because it describes a very popular request And hard to solve requests sometimes it has background video On the first screen.

Okay. And this is a challenging thing to make load fast. I recently had a client with exactly the same setup. And on using the example of this website that I have no access to, I will show how we can make a website with background video on the first screen load faster. And that's what we are going to do today.

Nice.

[00:06:49] Nathan Wrigley: Okay. Before we do that, I'll just make sure that everybody's got the correct URL for that for future reference. So there we go. WPbuilds. com forward slash speed. And if you go to that, you'll basically end up with a page that looks like this. And you can see from that here's what Sabrina was talking about.

Obviously there's some fairly basic data that we need from you, like your name, your email address, link to the website, but then... Your bank account. Yeah, that's right. Yes. Yeah, exactly. Keys to your house, that kind of thing. Just basic consent that you have some administrative rights to, for us to, go into your site and then there's the three options and you can read about those there.

So once more wpbelts. com forward slash speed, and I will remove that screen. And Sabrina, should we pop your screen on? Are you ready for that now? Sure. Okay, here we go

[00:07:39] Sabrina Zeidan: And I just want to say a quick hello to everyone who joined and Left message and I see my friend kami leaving a message as well. Hi kami if you're watching us leave a comment say hi, we would love to know that you're watching us That's right.

[00:07:58] Nathan Wrigley: That's a good point. Yeah, so Elliot, thank you for joining us. Appreciate that. And Cotton Web thank you. Such a great idea. Oh, that's nice. And then Cammy says, I'm working on a site with that right now. Can't wait for your tips. Oh, perfect! Perfect. Okay, go for it, Sabrina. I'll step out the way.

Cool.

[00:08:18] Sabrina Zeidan: Right now... we can see a website that has a background video, right? And this very website, it's loading quite fast, but most of the website won't be loading fast. And I'll show what, how we can investigate What are the bottlenecks to log to for it to load fast? For example, the first thing we need to understand about background videos on the first screen I'm talking about the first screen Like any content that have on the first screen the ground video on the first screen should be loaded as up So if you have ground video On your first screen, it has, it should have high priority in your loading path.

It should be loading as soon as possible. It means that you load everything that is required to display the video and nothing else. And then you load video and then you load everything that follows. So what is that? That is needed to load the video and load the first screen, right? Obviously, it's HTML.

It's some CSS, not all CSS, some CSS and some JavaScript and video itself. And then everything that is not needed for this first screen should go after. And by this, not only like live charts and things that are obvious, but everything, for example, below, after the first screen, you might have gallery or other videos or something else, or some pictures.

Anything else that goes below should be loaded after and should be delayed. If you have videos on this page that are loading below your background video, you want to lazy load them. But this video on the first screen, you don't want to lazy load it. Even more, you want to make it load as soon as possible.

Which means, I'll just look quickly

how... I know how this video is loaded because I picked this website as an example. But just to show you This very video here is loaded through Base JavaScript, through YouTube. In the backend of this website Developers or content managers who are running this website. They picked the option, whatever page builder they using, they pick the option to.

Take this video from YouTube, which is first it will make a request to the third party, which is YouTube. And this takes time. Second, it will be loaded through JavaScript because YouTube is loading your video, not directly. It's not loaded. It's not loaded from HTML. It's loaded from. through Javascript.

So first the Javascript from, for, that serves YouTube videos will be loaded, and only after the video coming from the third party, which is YouTube, will be loaded. What we want to do, the first thing that we want to do here is In our whatever page builder you are using you should aim to load video directly from the website Not from youtube not from vimeo or any other hosting service, but directly from the website using html tags Video html tag, right?

This is the first thing and Also this in your HTML tech, you should check that you don't have lazy load option on. You want it to be loaded as fast as possible. So by this we will achieve two goals. First, it will be loading as fast as possible without needing to be requested through JavaScript and then video.

It will be a video directly from HTML. And second, there would be no request to third party, which is YouTube. It will be taken from your own web server. Now YouTube compresses video very well. So if you have video of say 100 And then you load it from YouTube, YouTube will compress it, it will compress it to the size needed.

And if you just take your original video and you just upload it to your website and use it as is, it might be slower than this setup. To make it faster, we need to do what YouTube does. And in many cases, we can do it even better than YouTube do. I want to show an example. There is, first of all, a tool that I use.

It's called it's a command line tool, but it has a graphic interface. It's called FF... M P E

[00:14:21] Nathan Wrigley: G? Yeah, FFmpeg, yep.

[00:14:24] Sabrina Zeidan: Yes, it's not very readable. No. This is a graphic interface for it, but it's also a command line tool. And there are graphic interfaces for it for Mac and for Windows, both. So I'm using this tool to compress videos and here is the example of such compression for the client I recently had.

It was exactly the same setup. They were loading video from YouTube and the loaded video, the megabytes of the loaded video were 52 megabytes. And the quality wasn't really. Nice, and my goal with this was either to go below 52 megabytes or this whole thing makes sense, right? Either to go below 52 megabytes that are delivered from YouTube, or if possible improve, stay with the same 52 megabytes, but improve the quality of video.

I asked the client to send me the original video that they uploaded to YouTube. So that I can see if I can do anything to eat. They did it and the original video turned out to be 233 megabytes. Wow. Which is a lot, of course, it's a lot, but it's in a good quality and everything. What I did, I optimized it with this tool and the result of it.

I have good quality, which is 22 megabytes. And this quality was equal to was, to what was delivered from YouTube waiting 55 megabytes. So I was very happy with that, but I was thinking maybe I can get higher quality and lower size and I fiddled with settings a little bit more. And there are a lot of settings in this FFMP.

FFmpeg. Thanks, Nathan. There are a lot of settings there to try and I played with it a little bit and in the end it was 37 megabytes and the quality was higher than what was delivered from YouTube. I was super happy with this. So that's what you want to do first, load it directly from your. server not from YouTube, make sure that it's not lazy loaded, make sure that everything else delayed and lazy loaded.

Then you want to compress your video to as much as possible, but without loading, losing quality. Sometimes not to, sometimes the videos So long or so heavy you have to sacrifice something and in this case What I would usually do, I would suggest client to sacrifice the length of the video. If it's a background video, its purpose is not to demonstrate every single detail, but to make an impression, like to make the mood, the vibes that you can feel.

This video, for example, it's about one minute long. It's long video already. So if you can cut your video to 30 seconds, it won't make much difference. Don't make long backgrounds video because they're background videos, right? And then another thing to keep in mind What should be the size of the ground video because you can This is the first thing that you will need for compressing resizing video which size

And now we are talking about desktop only. I'll go to mobile in a bit. So to define what should be the size, because you can target different screens, you have to know two things. First thing is what is the size of screen of people? That come to your website, because if you have few people coming with 24 inch screens to your website and majority of users are coming from the laptops, which are 15.

6 or 13 inches. In this case, if you make the video of the size that is appropriate to larger screens, and it will be loading slow for majority of users. Yeah. It won't make much sense. You will be hurting majority of users trying to deliver the best content possible to that, to those few people. So what you want to do is to go to Google analytics.

Open Google Analytics, open devices, and just see the resolution of the screen. And this will give you the answer of what is the most typical screen size that your users have. This is the very first thing I do with all optimization projects. This and the one that I will mention next. Because every site is different.

For example, if it's a website for video producers. Are targeting video producers. Probably they all have large screens, Routina and everything. You want to target those screens. If it's not, I don't know, if it's a local gym website, probably people will be, most of the people will be opening it on mobile even, and you have to target mobile speed.

Like it will, it should be your priority and everything else. Can I

[00:20:42] Nathan Wrigley: just, can I just mention something? The it's a different tool just in case anybody's interested. So Sabrina is obviously using FFmpeg. I typically use a tool called Handbrake, which is an open source equivalent. It's, but it's the same really.

FFmpeg, it has a command line as far as I'm aware, Handbrake doesn't, but it does the same thing. And typically it strips about 90 percent of the file size out. We often for the. For the page builder summit, we often get videos, which are in excess of a gigabyte. And they're like 45 minutes long and usually handbrake gets it down to about 60 megabytes.

So it's about a 20, 20 X reduction. You got to fiddle with the settings, but yeah, if you if you want to try a different tool, you can try handbrake. And also a question for me. Handbrake, like in a car, that you pull up, it's got a, the icon is like two coconuts for no reason. But it's called handbrake and it does exactly the same thing, but it also converts just like FFmpeg does.

It will convert anything to anything else. So it will convert video to audio. And one of the nice things that you could do for that video. is just lose all the audio. There's absolutely no point in having the audio. So you just literally strip the audio out. So it's not like pressing mute, because by pressing mute all you're doing is saying silence that data, not don't give me that data.

So you can turn out, turn off the audio as well. But also I guess in the site that you were looking at the quality because it's it looked as if it was behind some layer of opacity Of course, then you're never going to see the original resolution. Anyway, are you're always it's always supposed to be slightly You are so right a little bit blurred or something.

Yeah, and you know in many websites Here, yes, there is some opacity but on many websites. It's even darker So you can't see much. It's just about the mood. And if it's just about the mood, you can really lose most of those megabytes without sacrificing any user experience

here. Yeah, and interestingly, the kind of stuff that you're showing on the video really reflects the file size.

So if it's fast moving, if everything on the screen is constantly changing, that's a lot of data. Whereas if it's like this in slow motion, that'll be a lot less. In the same way that, if you're looking at this video, about 20 percent of this video is just blue and yellow. That's doing nothing that, the MPEG file just needs to be told.

Yeah, just, it's yellow. It's still yellow. Nothing's being changed. So if you can go for slow motion and things like that, that also helps. But yeah, anyway Kami says she's downloading a handbrake now. Thanks Kami. Great. Did you want to answer Cottonweb's question right now or just want to wait with that?

[00:23:43] Sabrina Zeidan: See it right now. Can you read it?

[00:23:46] Nathan Wrigley: Yeah, it says, so Cottonweb's raised the question and it says, If a user is using blocks, so we're into WordPress, I guess now to build their web pages, is HTML code the best method to deliver the file? I guess what he's asking you, should you use a video block? Or, there's a YouTube block, for example, where you can just paste in the URL for the YouTube video, or are you going to go for the HTML block and you just paste like the iframe, because YouTube give you both of those options.

What's your thoughts?

[00:24:19] Sabrina Zeidan: This is exactly what I mentioned before, if it's on the first screen, if it's background video that should be played as sub, use HTML block for that, not YouTube video, HTML block, which will insert HTML tag video with source. And this will give you the delivery. The fastest delivery possible and for image for videos that are below this first screen it's better to use youtube videos because They will be lazy loaded.

They will be compressed so everything that what I usually do depends on setup, but this is like basic approach everything that is below, the below the first screen would be YouTube, but what is above the first in our first viewport will be delivered directly

[00:25:19] Nathan Wrigley: from text. There is also a cotton web.

There's the there's the, just the regular video block. If you do, if you go into a new block and forward slash VID, and from there, you'll find it that allows you to just. Search for something in your media library, which is basically the same thing. So you could do it that way. So you don't have to use the HTML block.

You could use the video block and find it in your own media library.

[00:25:44] Sabrina Zeidan: It will insert this HTML for you. Exactly right. It

[00:25:47] Nathan Wrigley: happens behind the scenes. It's the same thing. It's just slightly easier. Yeah, that's right. Yeah. Anyway, sorry. So there we go. Let's carry on. There

[00:25:56] Sabrina Zeidan: was one thing, Nathan, that I was thinking you might be a better source of information than I am.

It's the frequency of frames in your video. This is one of the settings that you want to try in these editors. Can you

[00:26:13] Nathan Wrigley: give us a little bit more? Yeah. If you want your video to look smooth. So in this case, because you've got this machinery and you want it to, and that's a perfect example, you've got these things sliding down the the runway there, it would look weird if it was glitchy, if you could see the difference between one frame and the other.

So typically you want 24. Or 30 frames a second, that would be your standard. Every time you drop below that, you'll obviously see more it just glitchy between the frames. But if your video is very slow moving, let's say for example, your video is just colors migrating across. It's just like a lava lamp almost.

And it's just to give an idea of color. I don't know why you would do that, but the point being there's no truck, there's nothing particularly defined about it. You could drop the frame rate. And if you drop the frame right by a factor of half, so in going from 24 frames to 12 frames, you literally. Half the size of the video because there's literally 50 percent of the data that's required, but typically 24 frames per second would be what you're after.

Yep Thank You

[00:27:21] Sabrina Zeidan: Nathan

And let me summarize. First thing, we load this from HTML text, the background video. We don't lazy load it, we don't load it from YouTube, we load it directly. Then we want to compress it and fiddle with the settings. Then... If we have the possibility, we might want to shorten it. This is a very long video for the ground video.

No one except of us watching this show would be staring at the screen for two minutes for 20 minutes. Like it's a, it's background video. You you have actually, this this is an example of that. usage of technologies because ideally your website should be very clear of what to do next here.

Like you can watch it indefinitely and without doing anything, but Probably people behind this business, they want people visiting their website to do something there. There is call for action, contact us or, yeah,

[00:28:35] Nathan Wrigley: do something. Yeah, it's not a, it's not a great example. Peter, by the way, would would say that really, you shouldn't be Peter Neri.

We do a show all about UI and UX and she's really. Forgive me, Peter, if I'm speaking out of turn, but I think it's fair to say that Peter would probably say, just don't put video there in the first place. It's probably not the thing to do necessarily, but you've got to have video, right?

There's definitely clients that are going to push back and say, look, I'm the boss. We're doing a video because that's what I want. And so now we're in possession of the right knowledge for how to do it. So store it locally. Compress it like crazy, modify its size so that it doesn't, you're not displaying a 4k video on a mobile screen.

Would you even show this on mobile or would you switch this on mobile?

[00:29:29] Sabrina Zeidan: I would. I would. And yeah, this is the next thing about mobile. Just one thing before we go to mobile. Yeah. There is another thing. That can be done. This is more like of a hack. And if you've done previous steps right, you wouldn't need it.

But, maybe, just a hack that you can use. If you've done everything before, and it still loads slowly, you can use the first frame of your video. as a placeholder. The very first the very first frame of your video you can use it as a picture as a placeholder for the video and load it Without the circle loading, you can load image that is the first frame and this way this Transition would be more smooth in this case.

You will need to load two assets obviously image first and video after but Sometimes this is the way to go. And in this case, you want to compress image also as much as possible. You can even do make it blurred on purpose, like you can blur it and write something there with a font that would be vectorized and will be clear.

And the background would be blurred to fix like these, but if you've done previous steps you won't need it. It's just a hack. Might be handy and then for mobile. Yes, of course So in I agree with peach and with you Nathan speaking on pitches behalf But in many cases background video is not necessary, but sometimes it's it looks really good like it's Like on this website, I don't know what are the goals of the owners, but it looks good.

And for example, if it's a car dealer, for example I don't know.

[00:31:48] Nathan Wrigley: Cammy's making the point that Cammy says videographers would need it on their website. If in the video industry, it's a. given. Yeah. Thanks.

[00:31:57] Sabrina Zeidan: Yeah. So in this case, for example, if it's videographers company, you want to play that video on mobile as well.

You just want to have it on mobile and to have it on mobile and to have it deployed and fast, you need just to do few things. First, you want to resize it accordingly to mobile. So to size this properly, to size it properly for desktop we need to know what our users, what screen size our users are using.

And I mentioned before. The second thing that you should check, it's the the setup of your theme. Look things here I'm opening device. I can choose device here to preview, right? And here I have iMac Retina, for example, and this very website on iMac Retina screen stretches the two full widths, right?

But many themes. themselves, they don't stretch, so even if your users have, in majority, have 24 inch screens, and your theme doesn't stretch to this width, it doesn't make sense to make the video larger than container where it is. Yeah. Makes sense, right? Yeah. Yep. So this is the second thing to check.

What users use and what is the current setup of your theme? And knowing these, it's really easy to figure out what to do to mobile. First, you want to do the same, check which mobile devices your users are using, right? And then Size the video properly, so if this video was 1920, which originally for mobile you want to make it vertical, like short for YouTube.

And sometimes... This video. So if you size it from a b if you size it to, it won't look the same. It would either load of with the same

[00:34:29] Nathan Wrigley: ratio, but it would be But it just crops the sides out. Yeah,

yeah.

[00:34:33] Sabrina Zeidan: Yes. So preferably for you will do another video with another U R L on this website. There is no video on mobile.

But mobile. would need to do another video that would be in portrait mode. And then you can fiddle with that as well on mobile. It's even less likely that people will be watching for 30 seconds, your background video. So if your background video on desktop was one minute long or 30 seconds long, it's absolutely fine to make it 15 seconds, 10 seconds for mobile.

Do you know how it happens? You open the website. Oh yeah.

[00:35:12] Nathan Wrigley: We live in the era of TikTok. Nobody's staying on that screen for more than two seconds, really. It's okay, you've caught the title and you're off, aren't you? You're just going to be scrolling away. Yeah. Yeah.

[00:35:24] Sabrina Zeidan: Yeah. And if you want this interactive content, you really can make it load fast without losing any interactivity.

Any, no one would miss it. You might be missing it. But users, it's. Chances are they won't be missing that video, it's not no, they won't be sad

[00:35:45] Nathan Wrigley: about it. They won't know what was never there. Yeah, that's a good point. There's a couple of comments, Cammy's made another few. Thank you, Cammy, making so many nice comments.

If someone has a video library on their website, is embedding from YouTube or Vimeo a better option to keep the size of the website in check? So basically, should you. Give it to Vimeo and YouTube. Obviously I have had a, I have an opinion on that, which I'll share after Sabrina's done hers. She says, obviously that's what I'm working on right now.

She's clearly got a client who's got a bunch of video. What would you, what would your recommendation be? Yeah,

[00:36:24] Sabrina Zeidan: absolutely. Especially on high level hostings, the storage space is very expensive. It becomes very expensive. The website might, for example, the website for videographer, might have not a lot of traffic, might not need a lot of resources like memory and server, but they might need a lot of storage and they would be paying extra and extra for storage.

So I would probably move everything to YouTube and This is a good thing to do in general. I think then you can promote this on YouTube you can Link people to your YouTube channel and so yeah, so I would move everything to YouTube Except of those background videos.

[00:37:13] Nathan Wrigley: So here's a different scenario.

So in our case Anshan and I do this page builder summit and the whole thing is basically video. And in that situation, we have a different requirement and that is that we don't want the video to be. Public video to be on our website and that's the place where it lives. And so it may be that's what Kami's got.

So we use you, we use Vimeo for a long time and Vimeo was absolutely fine because you can say only show this video on a particular domain. You can lock it down onto your particular domain. In other words, if the request comes from outside of your domain, it won't be visible. But then more recently we moved over to video press, which is actually CDN, if you like for video, and that's been really great.

You get, you've got to have you've obviously got to pay for some, upgrade ours came with jet pack. So there's that but it's, it was, I believe. A little bit cheaper than Vimeo, and it's all done natively inside of WordPress. And there's a video press block and all of those kind of things.

So yeah, I guess it depends, but offloading it to a CDN. Then you've got other things like Bonnie CDN, which you can use, or you could put it on cloud flares edge, which is also really affordable. They've got some brand new video hosting and streaming options. I believe it's called, I think it's called S2.

But I could be wrong about that. And that's, that is crazy cheap. So anyway, sorry, I'm going off on a tangent. But yeah, definitely put it somewhere else. Not on, I would say, don't put the video inside your website if it's going to be looked at, if the whole point of the website is video and it's going to be looked at a lot because chances are your hosting will grind to a halt,

[00:39:01] Sabrina Zeidan: and just to add to this, if you offload it somewhere, and here we're talking about offloading videos that are not background videos, that are normal videos, so they are below the viewport, first viewport, right? So if you offload it somewhere, mind to add domain where they are hosted now. To prefetch DNS setting in your, it's not setting, it's tech in your head section that you can add prefetching the domain.

It means that the website will establish early connection to the domain and we'll make it once and this way. You can save this time establishing the connection to the third party when the video is requested. And if it happens, if you have videos, not one video on one page, but a lot of videos on your website that all hosted somewhere, it's a nice thing to put in your header and to have this request made across the entire

[00:40:10] Nathan Wrigley: website.

I feel that is possibly the, that could easily be a... Topic for another day, a, an entire topic about DNS pre fetching and all of that. Cammy says, thank you so much. That's great info. She's got to run she's got a meeting, but she appreciates this. She says, miss you. I presume she's talking to you there.

Yeah. Type that in a hurry. Bye is what she meant to say. Okay. Miss you too, Cammie. Have a good meeting. Whatever that was. Okay. We're around, we're getting onto three quarters of an hour for our first show, we tackled video or Sabrina did. Is that everything you wanted to cover? I

[00:40:48] Sabrina Zeidan: think so. My purpose for this was to talk about background videos and like hero videos as

[00:40:55] Nathan Wrigley: background.

And I think we did it. Speaking of video I don't know if you've got this is ridiculous. Watch this. Mac OS has recently decided that they're going to do something fun with video. And so this is the Mac operating system.

[00:41:11] Sabrina Zeidan: I am still sharing my screen, Nathan. Look at that.

[00:41:16] Nathan Wrigley: Yes, I am still sharing your screen.

You'll find it. You're back. You're back in the room with the screen. Do you want the screen to be shared or not? Oh, no, I see. You don't want the screen. So look, so this is what Mac, this is what, yeah, this is what Mac now do if you raise your hands. Cool. Isn't that weird? Cool. That's the one.

And then if you put one thumb up, you get this

So needless to say, that gets switched off straight away. now it doesn't do it. So anyway, that was an aside that was video. That was our quick. Quick 101 on how to do video correctly. We'll be back next week. We'll have a different subject. That's great says Cotton Webby says he can't wait for the next one.

Thank you very much. But we'll be back. We'll let you know. It'll be the same time next week. So 3 PM Thursday, I believe we got booked in, but if you go to the WP builds website there'll be a little card. On the homepage, it says coming up. You just scroll down a little bit and it'll say coming up with some little cards about the things that we're doing over on WP build.

So we will keep you posted there. Okay. Sabrina, that's it for today. We'll see you next week. Take it easy. Always take it easy. Bye. Bye. Bye. Bye.

If you’d like your website examined by Sabrina, you can submit it…

Submit your site

Supported by:

GoDaddy Pro

Filter Deals

Filter Deals

Category

Category
  • Plugin (23)
  • WordPress (13)
  • Lifetime Deal (5)
  • eCommerce (4)
  • SaaS (4)
  • Admin (3)
  • Hosting (2)
  • Other (2)
  • Security (2)
  • Theme (2)
  • Blocks (1)
  • Design (1)
  • Training (1)

% discounted

% discounted

Filter Deals

Filter Deals

Category

Category
  • WordPress (39)
  • Plugin (33)
  • Admin (30)
  • Content (18)
  • Design (11)
  • Blocks (6)
  • Maintenance (6)
  • Security (5)
  • Hosting (4)
  • Theme (3)
  • WooCommerce (3)
  • SaaS app (2)
  • Lifetime Deal (1)
  • Not WordPress (1)
  • Training (1)

% discounted

% discounted

SUBSCRIBE TO OUR

NEWSLETTER

WP Builds WordPress Podcast

THANKS.

PLEASE CHECK YOUR EMAIL TO CONFIRM YOUR SUBSCRIPTION.

WP Builds WordPress Podcast