How to add YouTube video as instead of an embedded ?

问题

I have to insert a full width video on a website.

Because of problems of weight and design, I would like to know if I can specify the YouTube video as the src attribute of a <video> tag instead of an embedded <iframe>.

I would like to have a YouTube video without the design of the player and be as compatible with different devices as possible (e.g. browser, smartphones, tablets).

Do you have any ideas or solutions?

回答1:

As far as I know, you cannot embed video to webpage any other way that using original YouTube player (using iframe).

You can position the iframe to fill the viewport and let the content to overlap it like this post suggests: http://www.labnol.org/internet/youtube-video-background/27933/? Demo is here: http://img.labnol.org/files/video-background.html

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/ID?autoplay=1&controls=0&showinfo=0&autohide=1">
  </iframe>
</div>

// Replace ID with the actual ID of your YouTube video

You can also control it via Javascript using YouTube API https://developers.google.com/youtube/iframe_api_reference.

回答2:

You can make the iframe responsive by adding the below CSS, which should be easier than the approach you are attempting.

If you want a player with custom look and feel, you can write your own script using the youtube Data API OR a JQuery plugin that utilises the API

    <style>
    .outer-container{
        width:100%
    }
    .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>

<div class="outer-container">
<div class="video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
</div>
<br>
    <div class="video-container">
           <iframe width="560" height="315" src="https://www.youtube.com/embed/0afZj1G0BIE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

回答3:

I dont know if its possible to not use an Iframe. But you can change a lot of the design of the Youtube player. Should be compatible with mobile devices as far as i know.

Just Open the Youtube Video. Click on share. Click on Embed. Click on Show more. Uncheck "Show player controls","Show video title and player actions" and "Show suggested videos when the video finishes". Copy the Iframe tag.

You can change the width of the iframe manually.

example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/xmhnNUotIaE?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

来源：https://stackoverflow.com/questions/37790166/how-to-add-youtube-video-as-video-instead-of-an-embedded-iframe

标签

html