• Решено Corben Dalas

    (@corben-dalas)


    Здравствуйте!

    У меня реализуется адаптивность таблиц и видео с помощью CSS. Для этого я оборачиваю нужный мне тег в div с определенным классом. Например для видео:

    <div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/aiCL0-U9WxI" frameborder="0" allowfullscreen></iframe></div>

    Все это приходится делать вручную (я добавил кнопку для этого в редактор), что не очень удобно.

    Вопрос 1. Можно ли сделать так, чтобы редактор wordpress автоматически обрамлял необходимые мне теги в соответствующие контейнеры?

    Вопрос 2. Что если этот контейнер уже присутствует (в ранее опубликованных статьях), как поведет себя в этом случае редактор: будет добавлять или пропустит?

    Заранее благодарю!

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Автор Corben Dalas

    (@corben-dalas)

    С table вопрос решился установкой плагина Responsive Scrolling Tables.

    По iframe нашел рабочий вариант, перерыв буржнет — ссылка. Только вот одна незадача: wordpress оборачивает div в тег p, что не корректно в плане валидности.

    Может кто-нибудь знает как запретить редактору оборачивать теги видео (iframe, object, embed) в тег p. Сколько гуглил, ничего рабочего не нашел. По идее с реализацией не должно быть проблем? поскольку тег div например, редактор, не оборачивает.

    не проще ли в css обращаться к iframe, чем оборачивать его дивом?

    Автор Corben Dalas

    (@corben-dalas)

    Звучит, конечно, логично (сам так думал), но взгляните на css, без обертки в div не обойтись:

    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
        margin: 20px 0;
    }
    
    .video-container iframe,
    .video-container object,
    .video-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    • Ответ изменён 7 лет назад пользователем Corben Dalas.
    Модератор Юрій

    (@yube)

    Может кто-нибудь знает как запретить редактору оборачивать теги видео (iframe, object, embed) в тег p.

    Попробуйте изменить приоритет фильтра (из кода по Вашей ссылке) как-то так
    add_filter('the_content', 'div_wrapper', 9);

    реально не понимаю, что вы там творите.
    стандартная адаптированность ифрейма:

    
    iframe {
       max-width: 100%;
       height: auto;
    }
    
    Автор Corben Dalas

    (@corben-dalas)

    Юрий, действительно, приоритет с фильтром сработал! Спасибо! Думаю многим понадобиться.

    Flector, насколько я помню такой вариант не дает адаптивности по высоте (т.е. ширина изменяется, а высота iframe нет). Тут вроде расписано: https://stackoverflow.com/questions/11122249/scale-iframe-css-width-100-like-an-image

    Нашел еще более крутой способ работы с видео: плагин ARVE Advanced Responsive Video Embedder. Можно вставлять сразу ссылку видео в визуальный редактор, без всяких iframe. Прилично может сэкономить время. Всем спасибо за ответы, решение найдено (даже несколько)!

Просмотр 6 ответов — с 1 по 6 (всего 6)
  • Тема «Автоматическое оборачивание тега в редакторе» закрыта для новых ответов.