Force HTML5 Youtube Video

Force HTML5 youtube video

I've found the solution :

You have to add the html5=1 in the src attribute of the iframe :

<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1"></iframe>

The video will be displayed as HTML5 if available, or fallback into flash player.

Embed YouTube HTML5 Video

I don't know if it is the best way, but it works with your embed tag.

Lets say this is your link: https://www.youtube.com/watch?v=BbnRDXHVBUQ

change it to this: https://www.youtube.com/embed/BbnRDXHVBUQ

and embed it like this:

<embed src="https://www.youtube.com/embed/BbnRDXHVBUQ" width="640px" height="320px">

Force opening app for embedded youtube video

I'm just trying to do the same thing and I can tell you that there is no native way to specify that behaviour as a parameter.

The only workaround (I'm still trying to implement it) is to use YouTube's Player API for iframe. I think you should use that API to embed the video on the webpage and add a listener to the first "play" event, in that event you should check if the user is using a mobile device (using another JS library to check that) and stop the playback (the stop() API call will also stop the loading of the video file) and then redirect the user to the video URL (like youtube.com/xxxxxx). At that time, at least in Android, the user will be asked to open the link in the browser or the YouTube app. I think most user have the app as the default option.

That's the idea, I'll try it and if it works will edit this response with the code I've used.

This is the link where you can read about embedding the player, it's events and API calls: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3

For a real full screen solution, this can be achieved like this:

HTML

<div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>

CSS

* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

It is not perfect, e.g. it does not work well with extreme aspect ratios of the container, but is doing a great job in most situations. Here is a working example:

https://codepen.io/hnrchrdl/pen/YzPwjBV

Edit: Check Oliver's answer, he seems to have an improved version of this solution.

Embedded Youtube video player vs html5/flash video player in web application

Pros:

• No need to pay for hosting and content delivery
• Allows for quickly bootstraping new ideas
• Youtube makes content much more discoverable. Users watching similar content will be recommended your content as well. In this way they can find about your service.

Cons:

• No way to differentiate between paying and non-paying customers. What if you want to offer premium content to your paying customers?
• Youtube takes the lions share of any advertising revenue.
• No UI customization.
• Sometimes youtube censors things they don't want for whatever reason.
• If your website offers its users to leave comments or a "like" button then users may get confused over which comments to use - the ones in youtube or the ones in your website.
• Support for live broadcasting is a not as good.

---

Related Topics