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

New Here ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

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.

TOPICS
Code , Other

Views

57

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 11, 2020 Dec 11, 2020

Copy link to clipboard

Copied

LATEST

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines