YouTube Embed VS Link

Working in XDP X v.19, Windows 11 Pro

Current website in development:

https://draft-review.com/

Videos page seems slow to load with 2 YouTube videos.

What is the best way to display YouTube videos for good load time?

Thinking I have the option to link versus embed, just curious what other folks do.

*These are videos I uploaded to YouTube, to embed webpage.

Should I skip YouTube, upload MP4 videos to a videos folder, and then link to that?

Quote:

---

Originally Posted by hotrodsue

Working in XDP X v.19, Windows 11 Pro
Current website in development: https://draft-review.com/

Videos page seems slow to load with 2 YouTube videos.
What is the best way to display YouTube videos for good load time?
Thinking I have the option to link versus embed, just curious what other folks do.
*These are videos I uploaded to YouTube, to embed webpage.
Should I skip YouTube, upload MP4 videos to a videos folder, and then link to that?

---

Sue, YT is adding a shedload of code into your site and tracking access.

My gut is to use an HTML5 <video> Tag.
For either method, do include lazy="loading" as it defers a load until the browser brings things into view.
In other words, put videos way down the page.

Acorn

Thanks, Acorn.

Will use an HTML5 <video> Tag and include lazy="loading"

Quote:

---

Originally Posted by Acorn

Sue, YT is adding a shedload of code into your site and tracking access.

My gut is to use an HTML5 <video> Tag.
For either method, do include lazy="loading" as it defers a load until the browser brings things into view.
In other words, put videos way down the page.

Acorn

---

I have spent a hours trying to figure out how to do this.

This is my code:

<iframe width="480" height="270" src="https://www.youtube.com/embed/AhNU5C4aMzg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

I'm not familiar with lazy loading.
Have Googled and have been reading.

I'm good to watch video or read tutorial.
Just not sure I'm finding correct directions.

Does HTML5 <video> Tag replace iFrame?
Any help is appreciated.

Sue, it is fun to watch the videos being summoned when they scroll into view in the browser developer tools > Network pane.

The following work for me.

YT:

Code:

---

<iframe width="100%" height="100%" loading="lazy" src="https://www.youtube.com/embed/YT_stuff_here" title="The Quick Brown Fox" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

---

MP4:

Code:

---

<video loading="lazy" src="videos/Movie the First.mp4" controls width = "100%" height="100%"/>

---

Remember you cannot use a YT embed source as a <video> source. That needs to be a proper MP4.

Acorn

Quote:

---

Should I skip YouTube, upload MP4 videos to a videos folder, and then link to that?

---

Personally, if you have the original video, I would always upload an original video to the same directory as your site and call it from there; e.g. https://mydomain/video-name.mp4 or as you suggest load them to a video folder if you have a few of them. Use the video tag as Acorn suggests.

Acorn,

That did it, of course!
Thank you so much.

Great reminder about videos being summoned when they scroll into view in the browser developer tools > Network pane.

Sue