Need To Hide YouTube Branding With IFrame API
Solution 1:
You can add modestbranding=1
This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
showinfo=0 will remove the title bar
Values: 0 or 1. The parameter's default value is 1. If you set the parameter value to 0, then the player will not display information like the video title and uploader before the video starts playing.
Also I don't think YouTube allows you to remove their name/logo completely.
Solution 2:
I hide everything except play/pause button.
I manage to do this with negative margins.
Check the code below -
<!DOCTYPE html>
<html>
<style type="text/css">
#offset{
position: absolute;
top: -300px;
bottom: -300px;
right: 0;
left: 0;
background-color: black;
z-index: 12;
}
#payer-container{
height: 450px;
width: 800px;
overflow: hidden;
position: relative;
z-index: 1;
}
</style>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<div id="payer-container">
<div id="offset">
<div id="youTubePlayerDOM"></div>
</div>
</div>
</body>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('youTubePlayerDOM', {
height: '100%',
width: '100%',
playerVars: {
"autoplay": 0,
"controls": 0,
"enablejsapi": 1,
"video_id": "QswsUQNDW_U"
}
});
}
</script>
</html>
Note:
- You should have to create controllers manually if needed.
- The aspect ratio of the video is fixed.
Post a Comment for "Need To Hide YouTube Branding With IFrame API"