Bootstrap 3 - freeze effect on video

Question

I'm trying to freeze a video with an autolop, for example, on this website - http://campaign.mcdonalds.com.tw/McCafe/

this part of the website

Before you hover, the video image has an overlay.

When it freezes, the overlay disappears and the video grows slightly.

How can I achieve this freezing effect?

Answer 1

Some CSS magic:

.vid-container {
  width:100px;
  height:100px;
  background:#c90;
  transition: all 0.5s ease-out;
  position:relative;
}

.vid-container::after {
  content: " ";
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.5);
  position:absolute;
  top:0;
  left:0;
  transition: all 0.5s ease-out;
  pointer-events: none;
}


.vid-container:hover {
  transform: scale(1.2,1.2);
}

.vid-container:hover::after {
  opacity:0;
}

<div class="vid-container">
  Your video here
</div>

Run code

Answer 2

FIDDLE, , scale , .

HTML:

  <iframe width="560" height="315" src="https://www.youtube.com/embed/ie-C7DQVNKw" frameborder="0" allowfullscreen></iframe>

CSS

iframe {
    transform: scale(1, 1);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

iframe:hover {
    transform: scale(1.1,1.1);
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
}

:

, :

• transform, 1,1, , .

div, iframe (1.1, 1.1), 10% x y.

2. iframe.