It runs with your video on iPhone – but the loop not. After the video the related Videos are shown.

see https://webers-testseite.de/youtube-background/
After you have inspect it – i will remove your video from my page

PS: if i remove the playlist parameter ( see bottom color-section) the video stops playing on iPhone – but does not show those related videos allways :
see screenshot from iPhone:

you can only influence the select box ( as check boxes, radio buttons etc. ) by replacing the original html by a different html structure.

put this to your child-theme functions.php:
( it is specific to your form – because the selector for that form element is given by the ID: #element_avia_6_1
on other form elements it might be a different ID )

function style_select_options(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
    (function($) {     
        $('.avia_ajax_form #element_avia_6_1').addClass('custom-select');
    })(jQuery);

    var x, i, j, l, ll, selElmnt, a, b, c;
    /* Look for any elements with the class "custom-select": */
    x = document.getElementsByClassName("custom-select");
    l = x.length;
    for (i = 0; i < l; i++) {
      selElmnt = x[i].getElementsByTagName("select")[0];
      ll = selElmnt.length;
      /* For each element, create a new DIV that will act as the selected item: */
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
      x[i].appendChild(a);
      /* For each element, create a new DIV that will contain the option list: */
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide");
      for (j = 1; j < ll; j++) {
        /* For each option in the original select element,
        create a new DIV that will act as an option item: */
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
            /* When an item is clicked, update the original select box,
            and the selected item: */
            var y, i, k, s, h, sl, yl;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            sl = s.length;
            h = this.parentNode.previousSibling;
            for (i = 0; i < sl; i++) {
              if (s.options[i].innerHTML == this.innerHTML) {
                s.selectedIndex = i;
                h.innerHTML = this.innerHTML;
                y = this.parentNode.getElementsByClassName("same-as-selected");
                yl = y.length;
                for (k = 0; k < yl; k++) {
                  y[k].removeAttribute("class");
                }
                this.setAttribute("class", "same-as-selected");
                break;
              }
            }
            h.click();
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function(e) {
        /* When the select box is clicked, close any other select boxes,
        and open/close the current select box: */
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });
    }

    function closeAllSelect(elmnt) {
      /* A function that will close all select boxes in the document,
      except the current select box: */
      var x, y, i, xl, yl, arrNo = [];
      x = document.getElementsByClassName("select-items");
      y = document.getElementsByClassName("select-selected");
      xl = x.length;
      yl = y.length;
      for (i = 0; i < yl; i++) {
        if (elmnt == y[i]) {
          arrNo.push(i)
        } else {
          y[i].classList.remove("select-arrow-active");
        }
      }
      for (i = 0; i < xl; i++) {
        if (arrNo.indexOf(i)) {
          x[i].classList.add("select-hide");
        }
      }
    }

    /* If the user clicks anywhere outside the select box,
    then close all select boxes: */
    document.addEventListener("click", closeAllSelect); 

});
</script>
<?php
}
add_action('wp_footer', 'style_select_options');

after that for quick.css:

/*the container must be positioned relative:*/
.custom-select {
  font-family: inherit;
  text-transform: uppercase;
}

.custom-select select {
  display: none !important;
}

#top .select-selected {
  background-color: var(--enfold-main-color-bg);
  border-color: var(--enfold-main-color-primary);
  border-width: 1px;
  height: 41px;
  font-size: 12px;
  color: var(--enfold-main-color-primary);
  opacity: 0.7
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 18px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #666 transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #666 transparent;
  top: 12px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
  color: #FFF;
  padding: 2px 15px 2px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style the items (options), including the selected item:*/
.select-selected {
  padding: 5px 15px 2px;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: #ddd;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  font-size: 12px
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: #7d2a7e;
  color: #fff !important;
}

Looks then this way – but you can now style each option and pseudo states to your needs:

• This reply was modified 1 year, 10 months ago by Guenni007.

can you try this solution: https://kriesi.at/support/topic/portfolio-items-on-click-navigagte-to-external-website/

but i guess it is only for portfolios …

see the comment:

Link portfolio item to external URL
You can add a link to any (external) page here.
If you add a link to a video that video will open in a lightbox

… for posts you then had to set the format to “link”

see playerparameters: https://developers.google.com/youtube/player_parameters?hl=de for Youtube.

so rel should work – but if you set a playlist – and a loop – it will not stop – so same result.

see – example page: https://webers-testseite.de/vimeo-bg-video/

as long the parameter muted is set – it will autoplay on mobile iOS devices.

but if you do not need all those features of advanced layerslider – you can use color-section background video option as well.
just put in that inputfield : https://vimeo.com/917970783?badge=0&autoplay=1&muted=1&loop=1
maybe with parameter ( do not track ) &dnt=1

see here the player parameters of vimeo videos : https://help.vimeo.com/hc/de/articles/12426260232977-%C3%9Cberblick-%C3%BCber-Player-Parameter

I have found that pages simply load faster without the layer slider.