Logo Demo

1. Logo Setup Demo

2. Sample Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.com/v3/zwplayer/zwplayer.js"></script>
</head>
<body>
<div id="mse" style="width: 800px; height: 450px;  margin: 0 auto;"></div>
<script type="text/javascript">
    var info = {
        playerElm: 'mse',
        url: 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4',
        infoButton: true,
        optionButton: true,
        snapshotButton: true,
        controlbar: true,
        autoplay: false,
        fluid: true,
        ratio: "16:9",
        logo: {
            icon: 'https://cdn.zwplayer.com/logo.png',
            dock: 'right',
            x: '3%',
            y: '3%',
            width: '20%',
            height: '20%',
            opacity: 50
        },
    };
    new ZWPlayer(info);
</script>

</body>
</html>

3. Logo Object Properties Description

Property	Type	Default Value	Required	Description
`icon`	string		Yes	Logo image URL. Supports PNG, JPG, GIF, SVG formats. Using PNG or SVG images with transparency channels is recommended.
`dock`	string	right	No	Logo docking area. Options: `left` (left side), `right` (right side).
`x`, `y`	string	5%	No	Logo position coordinates, relative to the player. When `dock` is `left`, it is relative to the top-left corner; when `right`, relative to the top-right corner. Supports pixel values (e.g., `60px`) or percentages (e.g., `5%`).
`width`, `height`	string	5%	No	Logo dimensions. Supports pixel values or percentages (relative to player dimensions).
`opacity`	number	50	No	Opacity. Value range 0-100 (0: fully transparent, 100: fully opaque). Recommended value: 30-70. This property allows the player logo to blend into the video scene.