Шаблон Modern адаптивность iframe

ЕСТЬ РЕШЕНИЕ InstantCMS 2.X

Адаптивность iframe видео

#16 29 октября 2021 в 15:08

Вот код с сайта Make

  1. <script>
  2. jQuery(document).find('iframe[src*="youtube.com"]').each(function() {
  3. var td_video = jQuery(this);
  4. td_video.attr('width', '100%');
  5. var td_video_width = td_video.width();
  6. td_video.css('height', td_video_width * 0.6, 'important');
  7. });
  8. </script>

Поместить в main.tpl перед закрывающим тегом </body>

У меня работает.

Викторыч

СУПЕР!!! А как добавить другие домены по мимо youtube?

mindw0rk

Имхо, не стоит привязываться к ютюбе вообще. Если и типограф нельзя включить или фрейм выводится вне поля с типографом, то можно так пробовать:

  1. $(function () {
  2. var iframe_resp_classes = ".video_frame.embed-responsive-item";
  3. var iframe_no_resp = $("iframe").not(iframe_resp_classes);
  4. $(iframe_no_resp).wrap("<div class='video_wrap embed-responsive embed-responsive-16by9'></div>");
  5. $(iframe_no_resp).addClass(iframe_resp_classes);
  6. });

Если шаблон не модерн, нужно будет добавить ещё стилей немного:

  1. .embed-responsive {
  2. position: relative;
  3. display: block;
  4. width: 100%;
  5. padding: 0;
  6. overflow: hidden;
  7. }
  8. .embed-responsive::before {
  9. display: block;
  10. content: "";
  11. }
  12. .embed-responsive-16by9::before {
  13. padding-top: 56.25%;
  14. }
  15. .embed-responsive iframe {
  16. position: absolute;
  17. top: 0;
  18. bottom: 0;
  19. left: 0;
  20. width: 100%;
  21. height: 100%;
  22. border: 0;
  23. }

Если кто затестит, отпишитесь, пожалуйста!

#17 29 октября 2021 в 16:58

Олег Васильевич я, затестил ваш код вместо Make'евского — все четко, адаптация имеет место быть! На десктопе точно, и в постах, и в комментах. В мобильной версии не смотрел… 2.14.3, Modern.

Добавлено спустя 1 час

Проверил на роликах с Youtube и Rutube, вставкой url и вставкой html-кода — на локальном сервере и рабочем сайте… все прекрасно адаптируется!

#18 29 октября 2021 в 17:15

Если шаблон не модерн, нужно будет добавить ещё стилей немного:

Олег Васильевич я

С этими стилями отличная адаптивность получается на… шаблоне не модерн.
К счастью немного роликов в бд нужно обернуть, обойдусь без костыля на js. Там кстати в iframe_no_resp по коду у вас итак объект jQuery со всеми методами — нет никакого смысла передавать это в функцию $. 

  1. $(function () {
  2. var iframe_resp_classes = ".video_frame.embed-responsive-item";
  3. var iframe_no_resp = $("iframe").not(iframe_resp_classes);
  4. iframe_no_resp.wrap("<div class='video_wrap embed-responsive embed-responsive-16by9'></div>");
  5. iframe_no_resp.addClass(iframe_resp_classes);
  6. });

В любом случае, благодарствую за наводку на стили.

#19 29 октября 2021 в 20:29

все прекрасно адаптируется!

Викторыч

Это потому, что вы всё сделали круто!

С этими стилями отличная адаптивность получается на… шаблоне не модерн.

Absolute134

Так то не мной стили писанные. Я даже не знаю автора.

Там кстати в iframe_no_resp по коду у вас итак объект jQuery со всеми методами — нет никакого смысла передавать это в функцию $

Absolute134

Согласен

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.