Comment ajouter un écran d'accueil/espace réservé pour l'image d'une vidéo YouTube

J'ai un site web qui comprend un grand nombre de vidéos YouTube intégrées via; actuellement, ceux-ci sont chargés simultanément, ce qui, bien sûr, les causes du site à exécuter très lentement lorsque initialement chargé.

Quelle est la meilleure façon de charger une image comme un espace réservé/écran de démarrage à la place de la vidéo iframe?

L'image devra être remplacé par le YouTube iframe uniquement lorsque vous cliquez dessus (cela ne devrait être chargé lorsqu'il est demandé), donc de réduire la taille de fichier du site web de façon spectaculaire. J'ai trouvé des questions similaires avant, mais ils semblent recommandons l'utilisation de CSS et de jQuery pour modifier la visibilité de la vidéo. Cela ne fonctionne pas dans ce cas parce que le lecteur vidéo se charge en arrière-plan.

J'apprécie toute aide/suggestions.

InformationsquelleAutor Stuart | 2012-12-05
  1. 42

    Il devrait être assez simple, essayez quelque chose comme ceci:

    <img src="placeholder.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">
    $('img').click(function(){
    var video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).replaceWith(video);
});

    Démo: http://jsfiddle.net/2fAxv/1/

    Pour les vidéos youtube, ajouter &autoplay=1 à l'URL si vous voulez les lire lorsque l'image est cliquée.

    • Génial, merci beaucoup. C'est juste ce dont j'avais besoin. Impossible de trouver un exemple propre de ce genre. Juste pour information, cette question est maintenant un -2 parce que c'est une question facile, ou parce que j'ai rédigé il tort?
    • C'est parce que vous n'avez pas de montrer toute tentative de résoudre le problème vous-même. La prochaine fois, poste le code que vous avez essayé, même si elle n'est pas près à travailler. Aussi la phrase "Quel est le meilleur" a tendance à être un drapeau.
    • Ahh ok, merci encore
    • Vraie question ou pas, c'est le premier résultat de recherche, j'ai reçu, et merci de répondre à toute façon.
    • Il est également le premier résultat que j'ai obtenu ainsi. Peut-être que les gens ne devraient pas sauter si vite pour fermer questions. De nombreuses de nombreuses de NOMBREUSES fois au fil des ans le premier résultat, ou le plus proche de ce que je veux, est une question marqué comme fermé, mais avec la réponse que je cherche. Je comprends que l'OP n'a pas de poste de toutes les choses qu'il a essayé, mais la question est toujours utile, et m'a donné la réponse que je cherchais.
    • "Peut-être que les gens ne devraient pas sauter si vite pour fermer questions. De nombreuses de nombreuses de NOMBREUSES fois au fil des ans le premier résultat, ou le plus proche de ce que je veux, est une question marqué comme fermé" Droit des camarades, mais ne comprenez-vous pas? Les Veilleurs ont besoin de quelque chose à faire. Sérieusement: comment stupide. C'était une grande question. "Quelle est la meilleure façon de charger une image comme un espace réservé/écran de démarrage à la place de la vidéo iframe?"
    • Si possible, pourriez-vous ajouter une deuxième méthode, qui cache simplement la vidéo au premier au lieu de le remplacer? De cette façon, il peut toujours charger en arrière-plan. Je voudrais ajouter une nouvelle réponse moi-même, mais la question est fermée, mais c'est la première google frappé de sorte qu'il serait utile pour beaucoup de gens. Voici un JSFiddle montrant la méthode que je veux dire.
    • est-il un moyen de toujours afficher la vidéo youtube si l'img n'est pas chargé dans le code html à tous? Je suis à la recherche de cette solution pour un client qui va être l'aide d'un CMS. Idéalement, ils devraient toujours utiliser une haute résolution titulaire endroit où votre solution fonctionne à merveille, mais dans le cas où aucune img est inclus dans le balisage à tous les vidéo ne marche pas montrer à tous, comment résoudre ce problème?
    • Vous pourriez écrire une instruction conditionnelle qui est chargé dans un espace réservé d'image si l'utilisateur ne télécharge pas un de cette façon, vous avez une image de toute façon. Vous pourriez obtenir le YouTube de l'espace réservé d'image comme par cette question. Pour la accepté de répondre, le img balise devrait ressembler à ceci: <img src="https://img.youtube.com/vi/zP_D_YKnwi0/hqdefault.jpg" data-video="http://www.youtube.com/embed/zP_D_YKnwi0">

    InformationsquelleAutor Wesley Murch