Jump to content
  • 0
Sign in to follow this  
алексей мильчев

Вставка видео с ютуба в мобильную версию страницы

Question

Страница резиновая 320-768рх. Фрейм с видео 640*360. Соответственно, если устройство с разрешением меньше 640, появляется горизонтальная прокрутка. Фрейм можно уменьшить, но тогда значок,(заставка) видео обрезается и текст с названием видео обрезается. Изменение размера фрейма вроде и активно, но по факту не работает. Искал операторы, которые бы масштабировали заставку видео в коде вставки тоже не нашел. Есть какие-нибудь варианты это побороть?

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

2 answers to this question

Recommended Posts

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

Забыл, что к страничкам прикручен некий скрипт

 для ускорения загрузки странички. Если вставить как обычно, через iframe, то заставка тоже режется.

<link rel="stylesheet" type="text/css" href="http://septic-beton.ru/Video/css/style.css">
<script async>'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.className))a.push(els);
            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.style.backgroundImage = 'url(http://i.ytimg.com/vi/' + videos.id + '/sddefault.jpg)';
 
        // Размещаем над постером кнопку Play, чтобы создать эффект плеера
        var play = document.createElement("div");
        play.setAttribute("class","play");
        videos.appendChild(play);
 
        videos.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.setAttribute("allowfullscreen",'');
 
            // Высота и ширина iFrame будет как у элемента-родителя
            iframe.style.width  = this.style.width;
            iframe.style.height = this.style.height;
 
            // Заменяем начальное изображение (постер) на iFrame
            this.parentNode.replaceChild(iframe, this);
        }
    }
});
</script>

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...