Skip to content

Instantly share code, notes, and snippets.

@ajfisher
Created November 14, 2014 10:05
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ajfisher/1ea03f96caacfce11c81 to your computer and use it in GitHub Desktop.
Save ajfisher/1ea03f96caacfce11c81 to your computer and use it in GitHub Desktop.
How to make Cricket Australia Live Stream work full screen on your PC.

Making your Cricket Australia live stream bigger.

If you signed up for Cricket Australia's digital streaming service this summer you'd be pretty disappointed with the very tiny size of the video stream. For those of us that can't get terrestrial TV for whatever reason and use digital services and paid good money for them this is a terrible decision.

Thankfully, with a bit of CSS-fu it's possible to get an almost full-screen video feed and get rid of all those rubbish ads to boot.

This is version one - mostly because I only did enough to be satisfied watching the first ODI. I'll keep this updated and refine it over the course of the summer.

Install and configure

Download and install the stylish chrome extension

Once that is done open up the style manager and "Write a new style"

Call it whatever you want and then paste the following code into the "code" section.

.mc-advert,
.current-players,
.fat-score,
.stream-switcher,
.MC-streamButtons,
.MC-statsNav {
    display: none;
}
  
#stream-wrapper { display: none; }
  
.video {
    position: inherit !important;
    width: 100%;
    height: 100%;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    bottom: 0px !important;
}

In the "applies to" section, choose "URLs on the domain" and then add live.cricket.com.au

Save your config and then reload your video stream, go Fullscreen and there you go, a nice big cricket video stream.

Stick on your cap, grab a coldie and enjoy your cricket like this:

@KeirMeikle
Copy link

Adding this removed the final bits of border for me.

.video>.MC-statsWrapper {
position: absolute;
top: 0px;
right: 0px;
bottom: 0;
left: 0px;
}

@milesjordan
Copy link

Absolute legend. Thanks.

I added this to remove the score overlay since you can see the one on the stream quite clearly:

.fat_score, .fat-score {
z-index:-9999;
}

@Jarusa
Copy link

Jarusa commented Jul 8, 2015

Thanks guys,

just adjusted it a bit to get even more screen.

.fat_score, .fat-score {
z-index:-9999;
}
.mc-advert,
.current-players,
.fat-score,
.stream-switcher,
.MC-streamButtons,
.MC-statsNav {
display: none;
}

stream-wrapper { display: none; }

.video {
position: inherit !important;
width: 110%;
height: 110%;
left: -150px !important;
right: -150px !important;
top: -50px !important;
bottom: -50px !important;
}

@agwelb
Copy link

agwelb commented Oct 28, 2015

I have no additional know-how to contribute, but I wanted to extend a huge thank you to all for this advice.

@lochstar
Copy link

lochstar commented Nov 4, 2016

Hi,

2016 update. I have an alternate method.

Open your browser dev tools (F12) and paste in the following depending on your browser of choice.

# Chrome
document.getElementById('video-player_html5_api').webkitRequestFullscreen();

# Firefox
document.getElementById('video-player_html5_api').mozRequestFullScreen();

# IE
document.getElementById('video-player_html5_api').msRequestFullscreen();

This triggers the native browser fullscreen mode on the <video> element.

@pimbogels
Copy link

much appreciated

@scottwarren
Copy link

To make it a bookmark, prefix javascript: :D

@jj777
Copy link

jj777 commented Dec 4, 2017

@lochstar Does this work on firefox still? I get:

Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.

Edit: You can make it work for now by setting full-screen-api.allow-trusted-requests-only=false in about:config on firefox..

@JoeJHoward
Copy link

JoeJHoward commented Dec 5, 2017

This works better.

This makes it full screen only when your browser is wider than 992px. This way you can still check the stats and other features if you need to by just resizing the browser.

It also fixes the video being hidden at the end of broadcasts when they do the day recap.

If you want the full screen change to take effect at a different minimum browser width, just change "992px" to whatever you prefer.

/* Full screen only above 992px screen width */
@media only screen and (min-width: 992px)
{
	.MC-Video.ng-hide
	{
		visibility: visible !important;
		opacity: 1 !important;
		visibility: visible !important;
		z-index: 9999 !important;
	}
	.mc-advert,
	.current-players,
	.fat-score,
	.stream-switcher,
	.MC-streamButtons,
	.MC-statsNav
	{
		display: none !important;
	}
	#stream-wrapper
	{
		display: none !important;
	}
	.video-section-container > #placeHolder
	{
		width: 100% !important;
		height: 100% !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 99999 !important;
	}
}

@malleedust
Copy link

Oh my god thank you. I live on a farm with no TV and satellite internet. If I ever meet you guys the beers are on me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment