<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
</head>
<body>
<div id="playerContainer" >
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</div>
</body>
</html>
I want to fit the video to the screen and scrolling needs to be disabled. But instead of being full screen it is overflowing from the screen. Where am i doing wrong?
CodePudding user response:
Make the <body>
element have a class where
position: relative
, width: 100%
and overflow: hidden
are declared or use the inline style="..."
After doing this the video should take the width of the parent with a relative position.
CodePudding user response:
The solution can be this:
Added position:fixed; in css
Added height:100%; in css
Added background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center; in css
Added background-size: 100%; in css
Know Issues
- NavigationUI visible only in full screen mode (F11 or F) given of the script (Need to change the script to fix these) but it still work.
Final Code
<!DOCTYPE html>
<html>
<head>
<style>
.videosize {
position:fixed;
z-index:-1;
top:0;
left:0;
width:100%;
height:100%;
background: url('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8') no-repeat center center;
background-size: 100%;
}
</style>
</head>
<body>
<div id="playerContainer" >
</div>
<script src="https://cdn.jsdelivr.net/npm/indigo-player@1/lib/indigo-player.js"></script>
<script>
const config = {
sources: [
{
type: 'hls',
src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
}
],
};
const element = document.getElementById('playerContainer');
const player = IndigoPlayer.init(element, config);
</script>
</body>
</html>