Geek asks and answers

First attempt to lazy download (delay loading embedded YouTube videos) - how can I do this more elegantly?

Yesterday, I decided to improve the way my site is uploaded to YouTube by adding them only when the user requests them. Sometimes a page can have up to 30 videos, and it takes a long time to load.

This is the first time I have tried using the "lazy loading" method, and I thought it would be nice to ask:

What can I do to improve this?

How can I make it more elegant?

Has this completely missed the point of delayed loading?

JSFiddle .

Ignore the style that doesn't matter here.

How it works by first placing the anchor on the page containing the video ID:

<a href="#" data-video="FzRH3iTQPrk" class="youtube-video">

jQuery a.youtube-video :

$('a.youtube-video').each(function() {
    var videoId = $(this).attr('data-video');
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";

    var videoBackground = $('<span class="youtube-thumbnail"></span>');

    videoBackground.css({
        background:"#fff url('"+videoThumbnail+"') no-repeat"
    })
    ...

( , JavaScript):

    $(this).css({
        height:315,
        width:460,
        position:"relative",
        display:"block",
        textAlign:"center",
        color:"#fff",
        fontSize:26
    });

, :

    $(this).text('Click to load video');
    $(this).append(videoBackground);
});

YouTube :

$('a.youtube-video').click(function(e) {
    e.preventDefault();
    var videoId = $(this).attr('data-video');
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
    var videoEmbed = $('<object> ... </object>');      
        ...

:

    $(this).parent().append(videoEmbed);
    $(this).hide();
});
+5
2

href, , . a JS. , , , Javascript.

var url = "http://www.youtube.com/watch?v=" + videoId;
$(this).attr('href', url);

, , , :

$(this).attr('title', "Click to play video");

, , SMH, , . , .

, ctrl command. fiddle, click :

 var isCtrlPressed = e.ctrlKey || e.metaKey;
 if (isCtrlPressed == true){
    return;
 }

, , , , , . , , - , .

?

, . , (, ), , , .

, youtube , , , .

, , - , , , . , - , .

+4

jsfiddle . ( , , jsfiddle "embed". , jsfiddle, iframe, , iframes).

, , swfobject . . . div . , / .

, . - , , , .

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

<div class="container">
    <div id="placeholder_FzRH3iTQPrk"></div>
    <a href="#" data-video="FzRH3iTQPrk" class="youtube-video"></a>
</div>
<div class="container">
    <div id="placeholder_go43XeW6Wg4"></div>
    <a href="#" data-video="go43XeW6Wg4" class="youtube-video"></a>
</div>

JavaScript

$(document).ready(function() {
    $('a.youtube-video').each(function() {
        var videoId = $(this).attr('data-video');
        var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
        var videoBackground = $('<span class="youtube-thumbnail"></span>');
        videoBackground.css({
            background:"#fff url('"+videoThumbnail+"') no-repeat"
        });

        // also set the parent container size to prevent flicker
        $(this).add($(this).parent()).css({
            height:315,
            width:460,
            position:"relative",
            display:"block",
            textAlign:"center",
            color:"#fff",
            fontSize:26
        });
        $(this).text('Click to load video');
        $(this).append(videoBackground);
    });

    $('a.youtube-video').click(function(e) {
        e.preventDefault();
        var videoId = $(this).attr('data-video');
        var params = { allowScriptAccess: "always", allowFullScreen: "true" };
        var atts = { id: 'player_'+videoId };
        $(this).hide();
        swfobject.embedSWF(
            "http://www.youtube.com/v/"+videoId+"?enablejsapi=1&playerapiid=ytplayer&version=3", 
            'placeholder_'+videoId, "460", "315", "8", null, null, params, atts);

    });
});
+1

More articles:


All Articles