CSS/HTML using a radio button to activate hyperlink

CSS/HTML using a radio button to activate hyperlink

Building a site that uses multiple radio buttons that control multiple
content divs sliding on and off the screen. Would like the buttons to also
activate a change in an iframe that i use as a background screen.
Reason for this is i have video playing in the iframe to start and would
like to turn it off when some content comes onto the screen. I can make
the label for the radio buttons a hyperlink but this requires 2 clicks 1
on the label and 1 on the button.
CSS Section
#iframe_Back {
position:fixed;
top: 0;
left: 0;
height:100%;
width:100%;
z-index:-1;
}
html,body {
height:100%;
width:100%;
overflow:hidden;
}
input {
position:absolute;
left:-9999px;
top:-9999px;
}
label {
cursor:pointer;
display:block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
width:100px;
margin-bottom:10px;
height:20px;
background-color:#ccc;
Border:2px solid black;
border-radius:20px;
}
.slider {
position:absolute;
width:400px;
height:100%;
top:0;
right:-400px;
background-color:#ccc;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.slider_two {
top:100%;
left:0;
right:0;
width:100%;
}
.slider_three {
top:-100%;
left:20%;
right:0;
width:50%;
}
#one:not(:checked) ~ .slider_two ~ .slider_three, #two:not(:checked) ~
.slider_one ~ .slider_three, #three:not(:checked) ~ .slider_one ~
.slider_two {
-webkit-transition-delay:0.2s;
-moz-transition-delay:0.2s;
transition-delay:0.2s;
}
#one:checked ~ .slider_one {
right:0;
}
#two:checked ~ .slider_two {
top:20%;
}
#three:checked ~ .slider_three {
top:0%;
}
HTML Section
<iframe src="video.html" id="iframe_back" border=0
name="Background_1"></iframe>
<input type="radio" name="slider" id="one">
<input type="radio" name="slider" id="two">
<input type="radio" name="slider" id="three">
<label for="one">slider one</label>
<label for="two">slider two</label>
<label for="three">slider three</label>
<div class="slider slider_one">one</div>
<div class="slider slider_two">two</div>
<div class="slider slider_three">three</div>
Looking for a CSS/HTML solution not Jscript
Thanks