it-swarm.com.de

Die YouTube-Einbettung von Showinfo ist veraltet

Wir verwenden ein YouTube-Video auf unserer Website als Heldenbanner.

Vor einigen Tagen wurde jedoch der Titel, der spätere Button und ein Share-Button angezeigt. Wir konnten sie mit &showinfo=0 am Ende der URL ausblenden.

Ich habe herausgefunden, dass showinfowurde nicht mehr empfohlen und somit können Sie die Tatsache, dass es sich um ein YouTube-Video handelt, nicht mehr ausblenden. 

Gibt es andere Parameter, die möglicherweise dasselbe tun können?

Mit CSS oder JavaScript ist dies nicht möglich, da es sich um eine iframe handelt.

Irgendwelche Ideen werden sehr geschätzt.

UPDATE:

Jede Ebene oder Maske über dem Video hilft nicht, da die Informationen zeigen, wenn das Video geladen wird oder wenn Sie außerhalb des Browsers klicken, das Video angehalten wird und die Informationen angezeigt werden.

Das Verstecken der Spitze ~ 60px funktioniert, ist aber keine gute Lösung für mich.

6
Daut

Direkt von Info anzeigen

Hinweis: Dies ist eine veraltete Ankündigung für den Parameter showinfo. Außerdem ändert sich das Verhalten für den rel-Parameter. Titel, Channel-Informationen und verwandte Videos sind ein wichtiger Bestandteil des zentralen Nutzererlebnisses von YouTube. Diese Änderungen helfen dabei, das YouTube-Erlebnis auf verschiedenen Plattformen konsistent zu machen.

Das Verhalten des Parameters rel ändert sich am oder nach dem 25. September 2018. Die Folge ist, dass Sie keine zugehörigen Videos deaktivieren können. Sie haben jedoch die Möglichkeit festzulegen, dass die im Player angezeigten verwandten Videos vom selben Kanal sein sollen wie das gerade abgespielte Video.

Darin heißt es eindeutig, dass dies ein Teil der YouTube-Erfahrung ist. Es gibt keinen Vorschlag für eine Problemumgehung oder einen neuen Parameter, den Sie zum Archivieren der alten Ergebnisse senden könnten. Sie entfernen es. Wenn Sie versuchten, es mithilfe von Javascript und CSS zu erzwingen, würde ich fast vorschlagen, dass Sie gegen das Inhaltsverzeichnis sind, das besagt, dass Sie diese Anzeige nicht ändern dürfen. Die Leute sollten wissen, dass Sie etwas von YouTube zeigen

7
DaImTo

Wenn Sie die Informationen ausblenden müssen, wählen Sie im Idealfall Vimeo Pro (das eine Einbettung ohne Informationen ordnungsgemäß unterstützt).

Ansonsten gibt es eine einfache Problemumgehung:

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

Es schneidet die unteren und oberen 60px des iFrames ab, aber über einen Überlauf anstatt eines grob aussehenden schwarzen Balkens, sodass das Video die ganze Zeit über im Vollbildmodus angezeigt wird (und kaum ein Video wird ausgeschnitten, wenn Sie 720 erzwingen).

Dieser Hack unterstützt es, auch mobile Ansichten zu unterstützen, ohne den sichtbaren Bereich des Videos stark zu beeinträchtigen.

.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>                                        
4
Timo

Die Lösung, die ich ästhetisch am meisten ansprechend fand, ist, ein hochauflösendes Miniaturbild über das Video zu legen und es beim Schweben zu verbergen. Dies betrifft auch das Problem, dass die Youtube-Vorschau eine geringe Auflösung hat und meiner Meinung nach billig aussieht. 

Schau es dir hier an: http://jsfiddle.net/d9D9E/1/

Musste Code schreiben, um die Js-Geige zu zeigen: /

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

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

Nun, ich habe es auch nur gemerkt. Es saugt und zerstört die Ästhetik. Also habe ich einfach eine

header {
    /* remove when YT got its brain back */
    margin-top: -56px;
}

während sie hoffen, dass sie showinfo=0 wieder hinzufügen.

1
J. Bähr

Ich habe mir das gleiche Problem angesehen und die einzige Lösung, die ich gefunden habe, ist, das Video in Autoplay zu setzen und eine transparente Ebene über der Youtube-Box zu platzieren.

Der Benutzer kann nicht mit dem Player interagieren, er kann jedoch in bestimmten Situationen wie Banner nützlich sein.

Leider scheint der Code nicht korrekt auf stackoverflow zu laufen. Ich füge auch ein jsfiddle hinzu: http://jsfiddle.net/z3dqpuy0/

.yt-cntainer {
  position: relative;
}
		
.yt-mask {
  position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
<div class="yt-cntainer">
  <iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
  <div class="yt-mask"></div>
</div>

1
al404IT

Was ist damit? Ja, dadurch wird das Video vergrößert.

iframe {
  transform:scale(1.4);
}
0
Dushan
<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;
}
0
Eno B.

Nicht 'rel = 0' zu haben ist irritierend, aber es gibt eine Problemumgehung. Wenn Sie mit der IFrame-API arbeiten (im Gegensatz zum Einbetten eines iframe ex http://youtu.be/?videoIDxxx .. .), Können Sie das Ereignis zum Abbruch (Abschluss) des Videos erhalten Video per ID in den Player einblenden. Unter https://developers.google.com/youtube/iframe_api_reference#Playback_controls können Sie sich auf den Basis-Player beziehen.

 
....

<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>

0
msex

Seien Sie vorsichtig, die Übersetzung von Dokumenten (ich überprüfe nur auf Französisch) ist nicht auf dem neuesten Stand.

0
user671420
<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>
0
Eno B.