YouTube einbetten showinfo ist veraltet

Die Lösung, die ich gefunden ästhetisch höchst erfreulich ist die Schaffung eines high-res-Miniatur auf den video-und ausblenden bei hover. Dieser befasst sich auch mit dem problem, dass die youtube-Vorschau ist low-res und sieht Billig meiner Meinung nach.

Check it out hier:
http://jsfiddle.net/d9D9E/1/

Hatte, um code zu schreiben, um zu zeigen, js-fiddle :/

.video-thumbnail{
    z-index:300;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

.video-thumbnail:hover{
    display:none;
}

Wenn Sie brauchen, um zu verbergen die info, im Idealfall gehen Sie für Vimeo pro (richtig unterstützt eine info nicht einbetten),

Ansonsten gibt es eine einfache Lösung:

https://jsfiddle.net/10ov5hgw/1/

Schneidet Sie von unten & oben 60px der iframe, sondern über überlauf eher als ein grober Blick schwarz bar auf die Oberseite, so video sieht immer noch Vollbild die ganze Zeit (und kaum einer der video-Ausschnitt ist, wenn Sie erzwingen, 720) ,

Dieser hack unterstützt, dass die Unterstützung von mobilen Ansichten aswell, ohne stark Auswirkungen auf den sichtbaren Bereich des Videos.

.video-container{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:relative;
}
.video-container iframe,{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container iframe, {
  pointer-events: none;
}
.video-container iframe{
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
}
.video-foreground{
  pointer-events:none;
}

<div class="video-container" >
    <div class="video-foreground">
        <iframe
               src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
               frameBorder="0" allowFullScreen>

        </iframe>
    </div>             
</div>                                        

Nicht mit 'rel=0" ist irritierend, aber es ist eine Arbeit um. Wenn Sie die Arbeit mit der IFrame-API (im Gegensatz zum einbetten eines iframe ex http://youtu.be/?videoIDxxx...) Sie können das Ereignis für die Beendigung (Abschluss) des Videos, dann cue die video-ID in den player. Sehen https://developers.google.com/youtube/iframe_api_reference#Playback_controls für den Verweis auf die grundlegenden player.

JS:

 
....

<div id="player1"></div>

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player ;

function onYouTubeIframeAPIReady()
    {
    player = new YT.Player('player1', 
        { 
        videoId: 'YourVideoId',
        events: {
            'onStateChange': onPlayerStateChange
             }
        });

    }; //onYOuTubeIframeAPIReady
    		
function onPlayerStateChange(event)
    { 
    //Alt approach //if( event.data  == 0){ location.reload()}
    if( event.data  == 0)
        { player.cueVideoById({videoId:'YourVideoID',
                               suggestedQuality: 'hd720'})
        };
    } 

     </script>

HTML:

<div id="schnitt">

<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<style>
#schnitt {
height:250px;
overflow:hidden;
}

iframe {
margin-top:-55px;
}
   </style>