Презентация iSpring Cloud (classic), встроенная в WordPress, слишком маленькая. Что делать?

Давайте разберемся, как это исправить.

Для компьютеров

Настроить размер встроенной презентации легко с помощью параметров ширины width и высоты height. Замените значения этих параметров в скопированном embed-коде с процентов на пиксели. Например:

Исходный код:

<iframe src="https://pavelbender.ispringcloud.com/acc/zCrCliAzODk5/view/3899-BYPLX-AVT3M-9m1Wk/embedded?
from=embed&fit=1"frameborder="0" border="0" scrolling="auto" allowtransparency="true" allowfullscreen="1" st yle="border:
none; background-color: transparent; width: 100%; height: 100%;"></iframe>

Измененный код*:

<iframe src="https://pavelbender.ispringcloud.com/acc/zCrCliAzODk5/view/3899-BYPLX-AVT3M-9m1Wk/embedded?
from=embed&fit=1" frameborder="0" border="0" scrolling="auto" allowtransparency="true" allowfullscreen="1" st yle="border:
none; background-color: transparent; width: 800px; height: 600px;"></iframe>

* Обратите внимание, что максимальная ширина может быть ограничена (это зависит от выбранной темы WordPress).

Так презентация выглядит гораздо лучше:

Но этот способ имеет существенный недостаток. Фиксированные размеры означают, что ваша презентация не адаптивная. Она не будет подстраиваться под размеры мобильных устройств и просматривать ее на смартфонах будет неудобно.

Для компьютеров и мобильных устройств

Чтобы встроенная презентация отлично выглядела на любых устройствах, выполните следующее:

1. Скопируйте embed-код для вашей презентации из iSpring Cloud (classic) в какой-нибудь текстовый редактор (например, Блокнот)

2. Удалите параметры ширины и высоты – в конце кода должно получиться:
   до: transparent; width: 100%; height: 100%;">
   после: transparent;">

3. Добавьте скопированный embed-код между открывающим тегом <div class="embed-container"> и закрывающим тегом </div>:

   <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow:
   hidden; max-width: 100%;}
   .embed-container iframe, .embed-container object, .embed-container embed {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   }</style>
    <div class="embed-container">здесь ваш embed-код</div>
   

4. Вот что мы собираемся вставить в WordPress:

   <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow:
   hidden; max-width: 100%;}
   .embed-container iframe, .embed-container object, .embed-container embed {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   }</style>
    <div class="embed-container">
    <iframe src='https://pavelbender.ispringcloud.com/acc/zCrCliAzODk5/view/3899-rtiLD-gHYGQ-Z3ZHn/embedded?from=embed&fit=1' frameborder='0' border='0' scrolling='auto' allowtransparency='true' allowfullscreen='1' style='border: none; background-color: transparent;'></iframe>
    </div>
   

5. Перейдите на ваш сайт на Wordpress, откройте нужную запись в режиме редактирования текста и добавьте получившийся код.

6. Сохраните изменения и опубликуйте страницу.

Готово! Ваша презентация автоматически подстраивается под размер экрана и будет хорошо выглядеть на компьютерах, ноутбуках и смартфонах.

Дополнение: серые полосы

Иногда после встраивания презентации сверху или снизу появляются серые полосы. Чтобы их убрать, нужно изменить параметр padding-bottom. Вот он в нашем коде (шаг 5):

<style>.embed-container { position: relative; padding-bottom: 56.25%; height:

Этот параметр определяет соотношение сторон вашей презентации, и рассчитывается он следующим образом: padding-bottom = (высота презентации / ширина презентации) * 100%.

Например, по умолчанию он устанавливается для соотношения 16:9: padding-bottom = 9/16 * 100% = 56.25%. Если ваша презентация в другом формате, просто измените значение параметра padding-bottom.