私は使っている
<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
これにより、右下の「Youtube」ロゴが削除されます。また、ホバー時に表示される「タイトルバー」も削除します。
しかし、この問題では、ビデオにカーソルを合わせると、右下の「Youtube」のサムネイルの後ろに/テキストが表示され、マウスを削除すると消えます。
「autohide = 1」を使用すると、コントロールバーが非表示になり、右下隅にホバーで「Youtube」ディスプレイのアイコン/画像/ロゴが1つ表示されます。私は使っている
iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;");
この。これにより、コントロールバーからタイトルバーとロゴを削除/非表示にすることができますが、右下にはhoverの画面に1つのロゴが表示されます。
?modestbranding=1
をURLに追加できます。これにより、ロゴが削除されます。
控えめなブランディング(サポートされるプレーヤー:AS3、HTML5)
このパラメーターを使用すると、YouTubeロゴを表示しないYouTubeプレーヤーを使用できます。パラメーター値を1に設定して、YouTubeロゴがコントロールバーに表示されないようにします。ユーザーのマウスポインターがプレーヤーの上に移動すると、一時停止したビデオの右上隅に小さなYouTubeテキストラベルが表示されることに注意してください。
&showinfo=0
はタイトルバーを削除します。
showinfo(サポートされるプレーヤー:AS3、AS2、HTML5)
値:0または1。パラメーターのデフォルト値は1です。パラメーター値を0に設定すると、プレーヤーは、ビデオの再生を開始する前にビデオタイトルやアップローダーなどの情報を表示しません。
すべてのオプションは Google Developers Webサイトで見つけることができます。
ロゴが完全に削除されるわけではありません。左下にはまだ小さなロゴがあります。
showinfo
は廃止され、2018年9月25日以降は無視されます: https://developers.google.com/youtube/player_parameters
これは、「controls」パラメーターと「modestbranding」パラメーター間の文書化が不十分な、意図的に誤解を招く、または文書化されていない相互作用であることがわかります。少なくともビデオコントロールが公開されている間は、埋め込まれたYouTubeビデオからYouTubeのロゴを削除する方法はありません。ロゴを表示する方法とタイミングを選択するだけです。詳細は次のとおりです。
Controls = 1で、modestbranding = 1の場合、YouTubeロゴは大きくなり、ビデオの静止画像上で右下にグレースケールの透かしとして表示され、再生コントロールが右下に大きなグレースケールの透かしとして表示されるタイミングを示します。例:<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
Controls = 1でmodestbranding = 0(ここでの変更)の場合、YouTubeロゴは小さくなり、右下にグレースケールの透かしとしてビデオ静止画像上になく、コントロールが白いアイコンとして公開されている場合にのみ表示されます右下。例:<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=1&&showinfo=0&modestbranding=0" frameborder="0"></iframe>
Controls = 0の場合、modestbrandingパラメーターは無視され、YouTubeロゴが大きくなり、右下にグレースケールの透かしとしてビデオ静止画像上にあり、再生中の動画のホバーに透かしが表示され、透かしが下に表示されます一時停止した動画の権利。例:<iframe width="560" height="315" src="https://www.youtube.com/embed/Z6ytvzNlmRo?rel=0&controls=0&&showinfo=0&modestbranding=1" frameborder="0"></iframe>
YouTubeは、埋め込みYouTubeビデオからYouTubeリンクを完全に削除する機能を削除しました。
https://developers.google.com/youtube/player_parameters#modestbranding
Showinfoセクションを削除しても、YouTubeは一時停止中の動画の右上隅に半透明のロゴを配置します。
現在まで:埋め込み動画からYouTubeロゴとブランドを無効にするための多くの検索と提案を確認しています。以下を検討することをお勧めします。
まだ!次のパラメータを使用して、Modest-Brandingを持つオプションがあります。
https://www.youtube.com/embed/'+videourl+'?modestbranding=1
&showinfo=0 //Turn off Title & Ratings
&showsearch=0 //Turn off Search
&rel=1 //Turn on Related Videos
&iv_load_policy=3 //Turn off Annotations
&cc_load_policy=1 //Force Closed Captions
&autoplay=1 //Turn on AutoPlay (not recommended)
&loop=1 //Loop Playback
&fs=0 //Remove Full Screen Option (not sure why you’d want to)
次に、一般的なカスタマイズウィンドウを示します。
免責事項:YouTubeで働いていません。単に著作権を尊重します。
はい、それは本当です
1)By modestbranding=1 to your url. That will remove the logo that is appered in bottom lest as branding and
2)By &showinfo=0 will remove the title bar.
しかし、両方を削除することはできないと思う
両方試してみてください http://codegena.com/generator/Youtube-Embed-Code-Generator
1)ロゴを隠すとき
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1"frameborder="0"></iframe>
2)今トップバーを非表示にしよう
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&showinfo=0"frameborder="0"></iframe>
==>ただし、両方の情報を非表示にしようとすると、制限事項が表示されます
<iframe width='500' height='294' src="https://www.youtube.com/embed/YykjpeuMNEk?&theme=dark&autohide=2&modestbranding=1&showinfo=0"frameborder="0"></iframe>
右下の透かしは、mouseover
にのみ表示されます。それを削除するパラメーターはありませんが、動画の上に透明なdiv
を重ねて、より大きなz-index
と同じサイズの動画にすると、mouseover
はトリガーされませんマウスがdiv
に当たるため、ウォーターマーク。
もちろん、これのトレードオフは、ビデオを実際にクリックして一時停止する機能を失うことです。ただし、一時停止する機能を残したい場合は、コントロールを表示し、div
を下の30ピクセル程度まで隠して、コントロールをクリックできるようにすることができます。
autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&modestbranding=1&controls=2&showinfo=1
それは私のために働いた、それはまだサブスクライブを示し、それは共有リンクを示したが、別のページにそれらを移動するYouTubeボタンはありませんでした。そのため、私が使用する回線は、サイトのトラフィックを維持し、他のすべてのサイトに飛び立たないようにすることです。
これを試しましたが、「YouTubeで見る」アイコンを削除することはできません。私の次の解決策では、アイコン自体は削除されませんが、マウスホバーを「ブロック」して、YouTubeでの視聴がクリックできないようにします。アイコンにdivを追加したので、そのロゴのマウスオーバーは影響を受けません。
<div class="holder">
<div class="frame" id="player" style="height 350"></div>
<div class="bar" id="bottom-layer">.</div>
</div>
Frameは私の埋め込みプレーヤーです。あなたのcssファイルに以下を含める
.holder{
position:relative;
width:640px;
height:350px;
}
.frame{
width: 100%;
height:100%;
}
.bar{
position:absolute;
bottom:0;
right:0;
width:100%;
height:40px;
}
これは完全なソリューションではありませんが、ユーザーが完全なyoutube URLを取得することに悩んでいる場合に役立ちます。
Html5ビデオプレーヤーまたはyoutubeソースビデオを再生できる他のプレーヤー(jwplayerではない)を使用できれば、より良いでしょう。
シンプルなhtml5ビデオプレーヤーを使用してこれを開きます(XXXXXXをソースURLまたはダウンロード可能なURLに置き換えます)。
<video width="640" height="480" autoplay controls>
<source src="XXXXXX" type="video/mp4">
</video>
他の多くのビデオプレーヤーも使用できます。
私のように、ロゴを使用してyoutubeにクリックしない人を好む場合、1つのオプションはjwplayerのようなプレーヤーを使用することです。 jwplayerを使用すると、ロゴはまだクリックできません。
2018年8月以降、showinfoおよびrelパラメーター 機能しない より長く機能し、modestbrandingはすべてのロゴを削除しません
ここに私のトリッキーな解決策がありますすべてを隠す
開始する前に、すべてのyoutubeの情報がiframeの上部と下部にあることを理解する必要があります(ビデオではなく、重要です)
Iframeを実際のビデオの高さよりも高くします。 iframeパラメーターで、高さ=幅* 1.7(または他の乗法子)を設定します
ヘッダーとフッターの下にYouTubeの情報を非表示にし、iframeラッパー要素の上下に絶対位置を設定します。ヘッダーとフッターの高さは、iframeHeight iframeWidth *(9/16)))/ 2で計算できます。
私の場合、ビデオが終了した後にJSを使用してiframeを破棄するため、ユーザーは別のビデオでyoutubeのオファーを見ることができませんでした
また、重要な注意事項:iOS 12.2はYoutubeのプレーヤーを独自のものに置き換えているため、幅と高さの計算はコンストラクターで行う必要があります(Reactの場合)。
コード例jsfiddle.net/xavmd5j9
このソリューションの欠点は、イメージプレースホルダーが拡大することです。
---(
それがカスタムコントロールでどのように見えるかです
YouTubeのブランディングを削除する唯一の方法は、ビデオをクリック可能な状態に保ちながら、overflow
がhidden
に設定され、iFrameよりわずかに低いコンテナ内に埋め込みiFrameを配置することです。
もちろん、これはあなたのビデオの底が途切れることを意味します。
また、違反の可能性が最も高くなります YouTubeの利用規約 。
CSS:
.videoWrapper {
width: 550px;
height: 250px;
overflow: hidden;
}
HTML:
<div class="videoWrapper">
<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>