оптимизация сайта подключение youtube плеера

Оптимизация сайта: подключение YouTube плеера

В данной записи я вам покажу как правильно прописывать код загрузки видео с YouTube, чтобы достичь наименьшей нагрузки на сайт. Я вам покажу код который позволяет прогружать сначала изображение превью, а затем подгружать сам плеер.

Данный способ был придуман разработчиком Alexis Ulrich, и он без каких либо усилий позволяет увеличить скорость загрузки сайта в несколько раз.

Ссылка на все файлы и изображения будут находиться в самом низу записи.

Демо

HTML

Вначале нам необходимо прописать HTML код, который будет заменять нам всем известный iframe

<div class="youtube" id="ibSNMyNtNn4" style="width: 500px; height: 281px;"></div>

В атрибут id необходимо вставить идентификатор вашего видео на YouTube.

Для тех кто не знает, идентификатор находится здесь…

CSS

После этого вам нужно добавить в отдельный файл, следующий CSS код.

Внутри данного кода, вам нужно добавить путь к изображению кнопки play.

Изображение кнопки и все файлы будут находиться в конце записи.

.youtube {
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}
 
.youtube .play {
    background: url('Путь к изображению кнопки') no-repeat; /*ВАЖНО: здесь укажите адрес до изображения кнопки play*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 50px;
    width: 69px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
 
.youtube:hover .play {
    background-position: 0 0;
}

JavaScript (jQuery)

Последним этапом мы добавляем jQuery код.

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
    if (!document.getElementsByClassName) {
        // Поддержка IE8
        var getElementsByClassName = function(node, classname) {
            var a = [];
            var re = new RegExp('(^| )'+classname+'( |$)');
            var els = node.getElementsByTagName("*");
            for(var i=0,j=els.length; i<j; i++)
                if(re.test(els[i].className))a.push(els[i]);
            return a;
        }
        var videos = getElementsByClassName(document.body,"youtube");
    } else {
        var videos = document.getElementsByClassName("youtube");
    }
 
    var nb_videos = videos.length;
    for (var i=0; i<nb_videos; i++) {
        // Находим постер для видео, зная ID нашего видео
        videos[i].style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos[i].id + '/sddefault.jpg)';
 
        // Размещаем над постером кнопку Play, чтобы создать эффект плеера
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos[i].appendChild(play);
 
        videos[i].onclick = function() {
            // Создаем iFrame и сразу начинаем проигрывать видео, т.е. атрибут autoplay у видео в значении 1
            var iframe = document.createElement("iframe");
            var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
            if (this.getAttribute("data-params")) iframe_url+='&'+this.getAttribute("data-params");
            iframe.setAttribute("src",iframe_url);
            iframe.setAttribute("frameborder",'0');
 
            // Высота и ширина iFrame будет как у элемента-родителя
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
 
            // Заменяем начальное изображение (постер) на iFrame
            this.parentNode.replaceChild(iframe, this);
        }
    }
});
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

43
Оставить комментарий

avatar
43 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
41 Авторы комментариев
JeffreymaxJeffreymaxMichaeldusMichaeldusJohnnieQuabs Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Alli Ordering In Canada [url=http://apcialisle.com/#]Cialis[/url] Best Generic Viagra Review Cialis Propecia 20 Years Old

JanleF
Гость

Dog Keflex [url=https://buyciallisonline.com/#]Cialis[/url] Dapoxetina Wiki purchasing cialis online Venta De Viagra Para Hombres

bemnite
Гость
bemnite

buy cialis levitra viagra medications without a doctor’s prescription cialis for sale manila

AlvinCox
Гость
AlvinCox

cialis 20mg pills buy generic cialis cheap cialis without rx

JanleF
Гость

Zithromax Swollen Lymph Nodes [url=https://buyciallisonline.com/#]where can i buy cialis on line[/url] Can I Plug Clonodine Cialis How Can I Get Samples Of Metformin

CharlesGOP
Гость
CharlesGOP

cheap/discount cialis buy generic cialis how to order a viagra

Waltonplort
Гость
Waltonplort

buy cialis online canada https://viagrawithoutdoctorspres.com buy viagra by paypal

BarryNaW
Гость
BarryNaW

where to order cialis online safe ed drugs online from canada buy viagra zurich

Jefferykap
Гость
Jefferykap

viagra buy dublin viagra without a doctor prescription viagra online where to buy

Marvinerulk
Гость
Marvinerulk

viagra price comparison http://hydroxychloroquine24.com – generic plaquenil cialis uk buy online

Marvinerulk
Гость
Marvinerulk

buy viagra and cialis http://tadal24ph.com – cialis online female pink viagra 100 mg pills

Marvinerulk
Гость
Marvinerulk

cialis sale online http://kaletra24.com – buy kaletra online buy viagra johor bahru

Marvinerulk
Гость
Marvinerulk

splitting cialis pills http://kaletra24.com – Lopinavir order cialis europe

Marvinerulk
Гость
Marvinerulk

buy viagra johannesburg http://tadal24ph.com – cialis online buy cheap cialis uk

Marvinerulk
Гость
Marvinerulk

buy black cialis http://tadal24ph.com – what is cialis used for cialis buy from canada

Marvinerulk
Гость
Marvinerulk

cheap generic cialis australia http://kaletra24.com – Ritonavir cheap viagra tablets uk

Marvinerulk
Гость
Marvinerulk

buy viagra hujagra 2011 http://alexa24ph.com – buy viagra cheap viagra and cialis

Marvinerulk
Гость
Marvinerulk

buy generic cialis online no prescription http://alexa24ph.com – sildenafil cialis cheapest price canada

AlfredAdvog
Гость
AlfredAdvog

generic viagra 100mg
cialis to buy us

AlfredAdvog
Гость
AlfredAdvog

viagra online
cialis tadalafil 10mg tablets

AlfredAdvog
Гость
AlfredAdvog

cheap viagra
cialis for sale in us

AlfredAdvog
Гость
AlfredAdvog

viagra pills
cheap genuine viagra uk

AlfredAdvog
Гость
AlfredAdvog

viagra without a doctor prescription
buy levitra pills online

AlfredAdvog
Гость
AlfredAdvog

cost of viagra
buy cheap viagra mexico

AlfredAdvog
Гость
AlfredAdvog

viagra online
taking two cialis pills

AlfredAdvog
Гость
AlfredAdvog

viagra pills
buy viagra hcmc

AlfredAdvog
Гость
AlfredAdvog

viagra
can buy viagra dubai

AlfredAdvog
Гость
AlfredAdvog

cheap viagra
viagra online buy uk

DennisLof
Гость
DennisLof

cialis 20 image cheap cialis
hard erections cialis

DennisLof
Гость
DennisLof

cheap cialis generic cialis
does cialis make you bigger

DonaldTwill
Гость
DonaldTwill

female viagra sildenafil
buy viagra

DonaldTwill
Гость
DonaldTwill

pfizer generic viagra viagra
100 mg viagra lowest price

JosephDiona
Гость
JosephDiona

herbal replacement for viagra/cialis/levitra… cialis tolerance
cialis and interaction with ibutinib

JosephDiona
Гость
JosephDiona

cialis at a discount price daily use of cialis
cialis samples request

Thomasreeld
Гость
Thomasreeld

viagra samples: cost of viagra per pill buy viagra johor

Thomasreeld
Гость
Thomasreeld

what does viagra do: 100mg viagra without a doctor prescription discount generic cialis canada

abakaro
Гость

Cialis Soft Tabs Preis [url=https://cheapcialisir.com/]Cialis[/url] Amoxicillin Normal Dose Cialis Buy Zithromax 500mg

JohnnieQuabs
Гость
JohnnieQuabs

viagra without a doctor prescription prescription drugs without doctor approval prescription meds without the prescriptions onlinepharmacyero.com

JohnnieQuabs
Гость
JohnnieQuabs

buy prescription drugs from canada pain meds online without doctor prescription cialis without a doctor’s prescription onlinepharmacyero.com

Michaeldus
Гость
Michaeldus

what is cialis generic viagra

Michaeldus
Гость
Michaeldus
Jeffreymax
Гость
Jeffreymax

viagra or cialis: viagra vs cialis

Jeffreymax
Гость
Jeffreymax

how long does 20mg cialis keep in system: cialis