怎样提高网页中插入Youtube视频的性能？

}) ؛

Iframe. allowFullscreen = true ؛

</Iframe>
<Script>
تجنب حجب عرض الصفحة عن طريق إدراج iframe بعد تحميل الصفحة بواسطة JavaScript.
<Div id = "youtube-placeholder"></div>
Var firstScriptTag = document.getElementsByTagName('script')[0] ؛
 

Allowfullscreen>

Iframe. allowFullscreen = true ؛

Observer. observe(document.getElementById('youtube-placeholder') ؛
<Iframe
3. استخدام Intersection Observer API
Iframe. src = 'https:// www.youtube.com/embed/VIDEO_ID';
</Script>
}) ؛
}
}) ؛
 

يمكن تحميل واجهة برمجة تطبيقات Intersection Observer عند دخول iframe إلى منفذ العرض ، مما يزيد من تحسين الأداء.

Iframe. allowFullscreen = true ؛

Observer. observe(document.getElementById('youtube-placeholder') ؛
Tag. src = "https://www.youtube.com/iframe_api" ؛
Loading = "lazy"
يوفر YouTube واجهة برمجة تطبيقات JavaScript التي تتيح مزيدًا من المرونة في التحكم في تحميل الفيديو وتشغيله.
تدعم علامة "iframe" الخاصة بـ HTML خاصية "loading =" lazy "، والتي يمكن أن تؤخر تحميل محتوى iframe حتى يتدحرج المستخدم إلى المنطقة المجاورة.
Window. addEventListener('load', function() {
Function onYouTubeIframeAPIReady() {
Var observer = IntersectionObserver الجديد (function(entries) {
Entries. forEach(function(entry) {
Var player;
Src = "https://www.youtube.com/embed/VIDEO_ID"
2. قم بتحميل iframe ديناميكيًا باستخدام JavaScript
Var iframe = document.createElement('iframe') ؛

1. استخدام خاصية 'loading = "lazy"
}
}) ؛
 

Observer.unobserve (entry.tar get) ؛

<Div id = "youtube-player"></div>

Observer. observe(document.getElementById('youtube-placeholder') ؛
Height: "360" ،
FirstScriptTag. parentNode.insertBefore(tag, firstScriptTag) ؛
إذا (entry.isIntersecting) {

</Div>
}
}
5. استخدام الصور النقطية لتأخير التحميل
'OnReady': onPlayerReady
Var iframe = document.createElement('iframe') ؛
يمكنك عرض صورة نقطية أولاً ، ثم تحميل iframe بعد أن ينقر المستخدم.

VideoId: "VIDEO _ ID" ،
العرض: "640" ،
يمكنك عرض صورة نقطية أولاً ، ثم تحميل iframe بعد أن ينقر المستخدم.
}) ؛
 

Function onPlayerReady(event) {

Events: {
من خلال الأساليب المذكورة أعلاه ، يمكن تقليل تأثير YouTube iframe بشكل فعال على سرعة تحميل الصفحة وتحسين تجربة المستخدم. تعتمد الطريقة التي تختارها على الاحتياجات والسيناريوهات المحددة.
<Img src = "placeholder.jpg" alt = "YouTube Video">

Observer. observe(document.getElementById('youtube-placeholder') ؛
Function loadYoutubeVideo() {
3. استخدام Intersection Observer API
Iframe. src = 'https:// www.youtube.com/embed/VIDEO_ID';
</Script>
Document. getElementById('youtube-placeholder').innerHTML = "؛
}) ؛

}) ؛