YouTube Embed VS Link

[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?

[Acorn]

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

[hotrodsue]

Thanks, Acorn.

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

[hotrodsue]

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.

[Acorn]

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:

<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:

<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

[Initiostar]

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.

[hotrodsue]

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