function getLocation(parameter) {
const queryString = new URLSearchParams(window.location.search);
const queryStringParam = queryString.get(parameter);
return queryStringParam;
};
function fillServiceItemContent(parameter, element, infoArray, elementTitle) {
const locationParam = getLocation(parameter);
const info = infoArray[locationParam].info;
const title = infoArray[locationParam].title;
const video = infoArray[locationParam].video;
if (elementTitle === undefined && element.tagName === 'VIDEO') {
element.innerHTML = '';
element.setAttribute('src', video);
element.setAttribute('type', 'video/mp4');
return;
} else if(elementTitle === undefined) {
element.innerHTML = info;
return;
}
element.innerHTML = info;
elementTitle.innerHTML = title;
};.service-items .service-video video {
height: 80vh;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
box-shadow: -15px 14px 23px -16px #000;
-webkit-box-shadow: -15px 14px 23px -16px #000;
-moz-box-shadow: -15px 14px 23px -16px #000;
-webkit-appearance: none;
}<div class="service-items">
<div class="service-video">
<video id="service-video-source" autoplay loop muted playsinline></video>
</div>I have a problem with the box-shadow rendering on a video tag on iOS. It's not working properly neither on Safari or Chrome. I have tested it on iPhone X. It's pushing the video to the right, and the box-shadow is invisible. On desktop or Android is working properly. Is there a solution for this?
