Possible to show image as overlay

[Syedwaheed]

hi,
I want to show logo image with text in center just above the video only when video is maximize and want to hidden an overlay when video is minimize. Below is the image i m getting text right now.

[balindenberg]

Overlays are just HTML components. You can overlay an image onto the screen by setting the content of an overlay to an img tag:

someOverlay = {
    content: '<img src="someUrl.jpg"></img>',
    start: 0,
    end: 15,
    align: 'bottom-left'
}
            

You can style that element using CSS to make it appear where you want it on top of the video.

[Syedwaheed]

Thank you for your suggestion. how can i hide it when videois small or attach it with control bar. i m doing the following right now.
(function(window, videojs) {
var player = window.player = videojs('my-player1');
player.overlay({
content:'',
debug: true,
overlays: [{
content: '',
start: 'play',
end: 'pause'

    }]
  });
}(window, window.videojs));

But this will show the image when it video is minimize. i only want pic when video is maximize.

[Syedwaheed]

How Can i show the image only when screen is full and hide it when it minimize. I m having some problem can any help me with this. Following are the images.


It looks perfectly fine when video is maximize but i want to hide it when video is minimize as in first video. @misteroneill please help @mister-ben

[balindenberg]

@Syedwaheed You can use the VideoJS API to listen for a fullscreenchange event. When you catch that, I'd use the player.isFullscreen() function to check if the player is full screen or not and then adjust your image css based on that.

[Syedwaheed]

@balindenberg Thank you for your response. i have done it with the following code:
player.on('fullscreenchange', function() { if (!player.isFullscreen()) { // image.show(); player.addClass("hide-overlay"); }else{ // image.hide(); player.removeClass("hide-overlay"); } });
But i m facing the problem to make image responsive.. How do i make it responsive? Any idea if you have?