Member Avatar for riahc3

Hello,

We uploaded some videos in the back to YouTube and they reproduce perfectly on our webpage. The thing is, with mobile becoming more and more intresting, playing them in a HTML5 video player would be more universal.

How can we make this change?

  • 2 Contributors
  • 4 Replies
  • 219 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by riahc3

Dani AI

Generated

Short answer: yes — YouTube videos can be played via an HTML5-based player on external pages, but only by using YouTube’s supported embed methods (the iframe embed or the IFrame Player API). YouTube serves HTML5 to compatible browsers and has deprecated older Flash/object embeds, so trying to swap Flash yourself is brittle. Also you can’t (and shouldn’t) pull the raw MP4/FLV from YouTube to feed a native <video> tag — that’s governed by YouTube’s Terms of Service. (developers.google.com)

Concrete, modern approach:

  • Use the official IFrame Player API or the standard https://www.youtube.com/embed/VIDEO_ID iframe; include origin and enablejsapi when you need JS control and playsinline=1 for inline playback on iOS. Browser autoplay rules are stricter now (muted autoplay or a user gesture is usually required). (developers.google.com)

Example (minimal IFrame API pattern — replace VIDEO_ID and origin):

<div id="player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
  function onYouTubeIframeAPIReady() {
    new YT.Player('player', {
      videoId: 'VIDEO_ID',
      playerVars: { playsinline: 1, origin: 'https://example.com' }
    });
  }
</script>

Responsive + troubleshooting tips:

.video-wrap { position:relative; width:100%; aspect-ratio:16/9; }
.video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

Common causes when an embed won’t use HTML5 on mobile: old Android stock browsers or WebViews lacking current codec/HTML5 support, using insecure or protocol‑relative URLs, missing origin when using the API, or relying on the old ?html5=1 trick (which is unreliable). Test in latest Chrome for Android / Safari iOS and update WebView where possible. (stackoverflow.com)

Notes tied to the thread: ’s Flash-detection + document.write approach is fragile — switch to the iframe/IFrame API instead. ’s copyright/TOS point is valid: embedding via YouTube’s player is allowed, but direct hosting or downloading from YouTube is restricted by their terms. (youtube.com)

Member Avatar for riahc3

Got this:

<script src="">
</script> 

    <script language="javascript" type="text/javascript">
if(swfobject.hasFlashPlayerVersion("1"))
{
    document.write("<iframe width='700' height='418' src='//www.youtube.com/embed/videoseries?list=KJSDFJDSG9823' frameborder='0' allowfullscreen></iframe>");
}
else
{
    document.write("<iframe width='700' height='418' src='//www.youtube.com/embed/videoseries?list=KJSDFJDSG9823&html5=1' frameborder='0' allowfullscreen></iframe>");
}
</script>

While it does correctly detect if Flash is installed or not, I cannot view the HTML5 video on iOS and/or Android. Why not?

Edited by riahc3
Member Avatar for riahc3

Can't get it to work on Android..........OS limitation?

Member Avatar for flashhtml5

We doubt that this would be allowed due to video content copyright restrictions. However if anyone knows differently, they can chime in.

Member Avatar for riahc3

We doubt that this would be allowed due to video content copyright restrictions. However if anyone knows differently, they can chime in.

The video is mine....how can it be because of video content copyright restrictions when its mine on my site?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.