<

How To Do a Mouseover Effect on an Image or Icon with HTML

https://tvedb.com/?nrx=427

<!-- Indlejring --> <div class="youtube-player" data-id="VIDEO_ID"> <iframe width="500" height="280" src="https://www.youtube.com/embed/-jfQeqd0eqc?Version=3&loop=1&playlist=-jfQeqd0eqc&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>

/* CSS style for responsive video */ pre{ font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; margin-bottom: 10px; overflow: auto; width: auto; padding: 5px; background-color: #eee; padding-bottom: 20px; max-height: 600px; } table.i_frame { border: 5px solid LawnGreen; /* border: none; border-collapse: collapse; */ } th.iii_frame, td.i_frame { /*border: 1px solid black; padding: 1px; */ border-top: 5px solid LawnGreen; border: none; } .youtube-player { position: relative; padding-bottom: 56.23%; /* Use 75% for 4:3 videos */ height: 0; overflow: hidden; max-width: 100%; background: #000; margin: 5px; } .youtube-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: transparent; } .youtube-player img { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; border: none; height: auto; cursor: pointer; -webkit-transition: .4s all; -moz-transition: .4s all; transition: .4s all; } .youtube-player img:hover { -webkit-filter: brightness(75%); } .youtube-player .play { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url("//i.imgur.com/TxzC70f.png") no-repeat; cursor: pointer; }

Eller:

<!-- Indlejring --> <div class="videoWrapper"> <iframe width="500" height="280" src="https://www.youtube.com/embed/-jfQeqd0eqc?Version=3&loop=1&playlist=-jfQeqd0eqc&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>

/* CSS style for responsive video */ .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }