Вход • Регистрация

Отображение видео на смартфоне

  •
  • 09 апреля 2019 г.
  • Добрый день.
    Добавляю видео, оно на телефоне за рамки выходит, очень некрасиво. И гугл ругаться будет полюбому.
    https://www.denok.com.ua/shop/tsukaty/finiki/ вот пример.
    Подскажите пожалуйста что не так делаю, как править/добавлять чтобы нормально отображалось.
    Шаблон вроде как адаптивный покупала.
    • 09 апреля 2019 г.
    • Елена, видео выводится во фрейме. Судя по исх. коду, выставлена ширина фрейма "560".
      Значит, на устройствах с меньшим разрешением, оно будет вылазить.
      Решение:
      Поищите на форуме, уже был вопрос, как решить.
    •
    • 09 апреля 2019 г.
    • Шаблон адаптивный, но если вы в описание товара вставляете картинку шириной 1000px, то это ваша вина, что она не влезает в мобилках. Поэтому для таких элементов не нужно указывать ширину или указывать ее в виде 100%, тогда она тоже будет подстраиваться под ширину экрана.

      Так же и с видео. Нужно вручную его подгонять.

      П.С. Вообще видео - это отдельная головная боль. Я на своем сайте его как только не вставляла и все равно кривовато смотрится.

      Вот что-то типа такого получилось:

      Код
      <iframe width="100%" src="https://www.youtube.com/ссылка" frameborder="0"
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
      style="max-width: 600px;height: 100%;max-height: 500px;min-height: 300px;"></iframe>


      style="max-width: 600px;height: 100%;max-height: 500px;min-height: 300px;" - вот тут указываю:
      max-width: 600px - максимальная ширина.
      height: 100% - высота
      max-height: 500px - максимальная высота
      min-height: 300px - минимальная высота

      Попробуйте, вдруг подойдет и вам.
      •
      • 09 апреля 2019 г.
      • Я использую вот такой код для адаптивности

        CSS
        Код

        /*video youtube*/
        .embed-responsive.embed-responsive-16by9 {
        padding-bottom: 56.25%;
        }

        .embed-responsive.embed-responsive-4by3 {
        padding-bottom: 75%;
        }
        .embed-responsive{
        position: relative;
        display: block;
        height: 0;
        padding: 0;
        overflow: hidden;
        width:100%;
        margin:30px 0;
        }

        .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        }


        HTML
        Код

        <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="..."></iframe>
        </div>
        <div class="embed-responsive embed-responsive-4by3">
        <iframe class="embed-responsive-item" src="..."></iframe>
        </div>

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум