Re: HTML5 Video not playing over cellular data plan [Branched]

Report · Dec 11, 2020

Hello to all, I have an html website that was made from a Template Monster template, in one of the pages I have a video that is hosted into the hosting server (not from Youtube or Vimeo), the video is mp4 and webm and ogg, 750x422.

The video plays nice and smooth on a pc/Mac and it also plays nice and smooth on mobile devices when using wifi from home/office but it won't play and won't load on mobile devices when using cellular data from the cellular company.

I tried 3 different pieces of code for the player and currently I'm using the player that www.linkedin.com uses, when watching video from www.linkedin.com on a mobile device using cellular data all videos played nice and smooth and they loaded fast, when I tried to watch the video from my website on a mobile device using cellular data it won't play, it won't load, it can take several minutes to load, it can play but buffers for long time.

I contacted my hosting provider tech support and they don't have explanation for that problem, I contacted Template Monster tech support and they don't have explanation.

I found an internet article from Tmobile saying that it could be a problem with the cellular plan from each individual and they posted couple instructions to do directly on an iPhone 10 and 11, so since I have and iPhone 11 from Tmobile I followed the instructions and the video plays nice and smooth when using cellular data, I sent the link of the website to a couple of friends for them to try to watch the video and they said the video won't play or load on mobile devices using cellular data.

Does anyone know abut a solutions for this issue, or what on the website code is needed to make the video play on mobile devices when using cellular data?

Thank you.

Report · Dec 11, 2020

I branched and moved your question to a new discussion as the one you posted to is unrelated to your issue.

I suspect your video is too big and your server and cell data plan are too slow. In contrast to mom & pop shared hosting plans, LinkedIn & YouTube can afford super fast, dedicated streaming media servers. This ensures a better user experience for everyone but it's also very expensive.

Upload your video to YouTube and let them host it for you.

Copy & paste the YT embed code into your document and test it over your cellular data plan.

Post back if you have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 11, 2020

Below is a YouTube video to test. Copy & paste this code into a new, blank document. Save and upload to your server.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Video Iframe</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS code-->
<style>
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
<!--HTML code-->
<h3>Responsive Video Iframe</h3>
<div class="video-container">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator