How to "light embed" to improve performance?

Microsoft

 

This is related to Stream: The embed code used to insert into a separate file is a very common approach to embed videos on other pages. But when many videos are embedded on a page, it causes a significant delay in page load times. This is an effect that is common with all streaming services, not just Stream.

 

Can you help me determine if there is a way to do a "light embed" where just the thumbnail loads initially, and not all of the overhead involved in the player queuing up the videos? Below is a link that apparently works for YouTube embeds. I've tried it on Stream and it doesn't seem to work. But I suspect that there might be a syntax that does work for Stream.

https://varvy.com/pagespeed/defer-videos.html

 

2 Replies

Stream embed already does something like this. When we load our iFrame we don’t load the video or player yet. We just get enough code in place to load the thumbnail for the video. When the user clicks play then it loads the player and starts fetching the video. 

 

However the page does still need to load our  javascript and make calls to Stream to get the thumbnail and metadata, etc.

 

The article attached below fully defers the iFrame from loading until after the page loads.

I tried it just now against both YouTube and Stream and was able to make it work just as described in the article. 

 

Here is my quick testing HTML that works for a video in Stream and YouTube...

<html>
<script>
               function init() {
               var vidDefer = document.getElementsByTagName('iframe');
               for (var i=0; i<vidDefer.length; i++) {
               if(vidDefer[i].getAttribute('data-src')) {
               vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
               } } }
               window.onload = init;
</script>

<body>
               <iframe width="640" height="360" src="" data-src="https://msit.microsoftstream.com/embed/video/a97032ac-0781-4dfa-adae-dadd2cf666db?autoplay=false&showinfo=true" frameborder="0" allowfullscreen ></iframe>

               <iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/jofNR_WkoCE" frameborder="0" allowfullscreen></iframe>

</body>
</html>

Thank you Marc! Will test.