За последние 24 часа нас посетили 5507 программистов и 431 робот. Сейчас ищут 226 программистов ...

Помогите дописать код

Тема в разделе "Сделайте за меня", создана пользователем Bexultan, 15 апр 2019.

Метки:
  1. Bexultan

    Bexultan Новичок

    С нами с:
    15 апр 2019
    Сообщения:
    2
    Симпатии:
    0
    У меня есть слайдер, в слайдере 4 видео, надо чтобы когда юзер заходил через мобильное устройство показывало картинки вместо видео, проблема в том что надо каждое видео менять на картинки, даже если седлать через обычный media query, то как? я начинающий программист, помогите решить эту задачу
    код в темплейте:
    Код (Text):
    1. <video class="player__video" width="506" height="506" muted preload="auto" playsinline poster="[xfvalue_videopathimage]">
    2.                   <source src="[xfvalue_videopath]" type="video/mp4">
    3.                   Your browser does not support the video tag.
    4.                 </video>
    код в css:

    Код (Text):
    1. .player {
    2.   position: relative;
    3.   text-align: center;
    4.   cursor: pointer;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. @media (max-width: 767px) {
    10.   .player {
    11.     overflow: hidden;
    12.   }
    13. }
    14.  
    15. .player__video {
    16.   overflow: hidden;
    17.   max-width: 100%;
    18.   position: relative;
    19.   vertical-align: top;
    20.   height: 100%;
    21.   width: 100%;
    22.   width: 100%;
    23.   height: 100%;
    24.   -o-object-fit: cover;
    25.      object-fit: cover;
    26. }
     
  2. username1

    username1 Новичок

    С нами с:
    23 янв 2019
    Сообщения:
    33
    Симпатии:
    2
    возможно средствами php можно определить браузер и вывести img вместо video
     
  3. Надин

    Надин Новичок

    С нами с:
    28 апр 2019
    Сообщения:
    13
    Симпатии:
    1
    я не программист в широком смысле, обучалась только азам html. могу попробовать посоветовать на чистом коде прописать. Нужно сделать виджет с картинками отдельно, добавить в разметку под видео и в стилях css добавить к новому виджету свойство display:none; а в медиа запросе, на нужный размер, прописать его класс со свойством display:block. Там же, в медиа запросе, поставить display:none для видео.
    надеюсь поможет)
     
    Vanchot нравится это.
  4. Sail

    Sail Активный пользователь

    С нами с:
    1 ноя 2016
    Сообщения:
    1.249
    Симпатии:
    280
  5. Надин

    Надин Новичок

    С нами с:
    28 апр 2019
    Сообщения:
    13
    Симпатии:
    1