Video Not Playing on iOS Mobile View in Custom Widget

[sowmyamaradana]

Hi Team,

I have created a custom widget to provide a tutorial video titled "How to Raise a Request." The video plays fine on Android devices but doesn't work on iOS devices (Safari browser).

Here is the code used for the widget:

html

<!--

<div class="request-tutorial">
<!-- Heading for the Widget (remains visible) -->
<h2>How to Raise a Request</h2>
<hr> <!-- Horizontal line -->

<!-- Video Container -->
<div class="video-container" onclick="playVideo()">
<div class="video-wrapper">
<iframe id="videoFrame"
src="video url in embedded format"
frameborder="0"
allowfullscreen>
</iframe>
<div class="overlay">
<span class="play-icon">▶</span>
</div>
</div>
</div>
</div>

<!-- Modal Structure for the Video (with header on white background) -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<!-- Modal Body with white background -->
<div class="modal-body">
<div class="white-background" style="background-color: white; padding: 17px 20px 20px 20px;">
<!-- Header inside the white background section -->
<div class="modal-header" style="border-bottom: 1px solid #ddd; padding: 0px 0px 15px 0px;; position: relative;">
<h5 style="margin: -5px; font-size: 20px; font-weight: bold;">How to Raise a Request</h5>
<!-- Close button with absolute positioning -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="border: none; background: none; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);">
<span aria-hidden="true">&times;</span>
</button>
</div>

<!-- Video Container -->
<div class="video-container">
<iframe src="video url in embedded format"
frameborder="0"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Optional: JavaScript for handling play video -->
<script>
function playVideo() {
var videoFrame = document.getElementById('videoFrame');
var videoUrl = videoFrame.src;

// Open modal and play video directly
$('#videoModal').modal('show'); // Show the modal
videoFrame.src=videoUrl + '&autoplay=1'; // Add autoplay parameter
}
</script>

-->

The video is embedded from SharePoint, and I am using an iframe for the video display. The modal is triggered with JavaScript to play the video.

Steps Tried:

• Verified the video works on desktop browsers and Android devices.
• Double-checked the video URL and embed code from SharePoint.

Issue: The video does not load or play on iOS devices.

Question:

• Are there any specific restrictions or configurations needed for iOS/Safari when embedding videos in ServiceNow widgets?
• Does this issue require additional settings for the iframe or modal compatibility?

Any insights or solutions would be greatly appreciated.

Thank you!