PeterPilz PeterPilz - 1 month ago 13
CSS Question

Stop & Start Video On Hover

I have the following issue:


  • I want to make an Portfolio Grid with Videos

  • The Videos should start, when the User is hovering over the Portfolio-Item & and it should stop, when is not above it



Problem I use Overlays to for adding colors and text to the Portfolio-Items. That's why the Javascript is not reacting.

Information: The Video at the bottom without Overlay is just there to show that the JS is working.

Thank's for ya help!!!




* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.row {
clear: both;
}

.spalten-6 {
width: 49.99992%;
}

.spalten-12 {
width: 100%;
}

.spalten-6,
.spalten-12 {
float: left;
}

.img-box img {
width: 100%;
}

.img-box {
border-left: 3px solid white;
position: relative;
margin-left: -3px; /* nur weil ich eine Border von 6px links hinzugefügt habe. Sonst habe ich einen Rand */
}

.img-box-figcaption {
position: absolute;
bottom: 0%;
right: 0%;
transform: translate(-10%, -10%);
z-index: 100;
font-size: 30px;
color: white;
text-align: center;
opacity: 0.9;
font-weight: 500;
z-index: 200;

}

.title {
position: relative;
top: -25px;
font-size: 15px;

}

.surround {
position: relative;
}

.img-play-figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}

.img-play-figcaption img {
width: 30px;
opacity: 0.8;
}

.img-box:after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 99%;
background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.1980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), transparent;
-webkit-background-size: 1px 1px;
background-size: 1px 4px;
}

<div class="row">
<div class="spalten-3 spalten-small">
<div class="surround">
<div class="img-box">
<img src="Images/portfolio-bg.jpg" alt="">
</div>
<div class="img-play-figcaption">
<img src="Images/play-icon.png" alt="">
</div>
<div class="img-box-figcaption">
<p>CULCHA CANDELA <br> <span class="title">• Rodeo •</ span></p>
</div>
</div>
</div>
<div class="spalten-6 spalten-small">
<div class="surround">
<div class="img-box">
<div style="text-align:center" onmouseover="Play()" onmouseout="Pause()">
<video id="video1" width="100%">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>

</div>
<div class="img-play-figcaption">
<img src="Images/play-icon.png" alt="">
</div>
<div class="img-box-figcaption">
<p>FARGO &amp; JAMIE LEE <br> <span class="title">• Jetzt erst recht •</span></p>
</div>
</div>
</div>
<div class="spalten-3 spalten-small">
<div class="surround">
<div class="img-box">
<img src="Images/portfolio-bg-grey.jpg" alt="">
</div>
<div class="img-play-figcaption">
<img src="Images/play-icon.png" alt="">
</div>
<div class="img-box-figcaption">
<p>FARGO &amp; JAMIE LEE <br> <span class="title">• Jetzt erst recht •</span></p>
</div>
</div>
</div>
</div>



<div class="row">
<div class="spalten-12 spalten-small">
<div class="footer">
<p>© BOOMYEAH PRODUCTION</p>
</div>
</div>
</div>

<div style="text-align:center" onmouseover="Play()" onmouseout="Pause()">
<video id="video1" width="480">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>

<script type="text/javascript">
var myVideo=document.getElementById("video1");

function Pause()
{
myVideo.pause();
}
function Play()
{
if (myVideo.paused)
myVideo.play();
}

</script>




Answer Source
 <div class="surround" onmouseover="Play()" onmouseout="Pause()">
        <div class="img-box">
         <div style="text-align:center"  >
   <video id="video1" width="100%">
     <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.ogg" type="video/ogg" />
     Your browser does not support HTML5 video.
   </video>
 </div>

How does thay work for you? Move the on events to the parent div. Or try the div with the img-box class... i think your text align center div is being covered my the img-box div so its not triggering mouse over events...