serovpochta
@serovpochta
Лысый

Как в плагине Вордпресс Featured-video-plus в миниатюре записи показать кнопку запуска видео до наведения на нее мыши?

Может кто сталкивался с такой проблемой стилизации этого плагина, либо подскажет, как в стилях можно это реализовать? Еще, мне кажется, "фишка" отображения кнопки кроется в js вообще..но там черт ногу сломит
Заранее благодарен.
На всякий style:
.featured-video-plus.fvp-responsive .wp-video {
  width: auto !important;
  height: auto !important;
}
.featured-video-plus.fvp-responsive .wp-video video {
  width: 100% !important;
  height: auto !important;
}
.featured-video-plus.fvp-responsive .mejs-container {
  width: 100% !important;
  height: auto !important;
  padding-top: 57%;
}
.featured-video-plus.fvp-responsive .mejs-overlay,
.featured-video-plus.fvp-responsive .mejs-poster {
  width: 100% !important;
  height: 100% !important;
}
.featured-video-plus.fvp-responsive .mejs-mediaelement video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
.featured-video-plus.fvp-responsive audio {
  width: 100%;
}
.featured-video-plus.fvp-center {
  text-align: center;
}
.featured-video-plus.fvp-center .wp-video {
  margin: 0 auto;
}
.featured-video-plus.fvp-right {
  text-align: right;
}
.featured-video-plus.fvp-right .wp-video {
  margin: 0 0 auto auto;
}
.featured-video-plus.fvp-left {
  text-align: left;
}
.featured-video-plus.fvp-left .wp-video {
  margin: 0 auto auto 0;
}
.fvp-overlay,
.fvp-dynamic {
  position: relative;
  display: block;
  height: auto;
  width: auto;
}
.fvp-overlay .fvp-actionicon,
.fvp-dynamic .fvp-actionicon {
  background: transparent no-repeat scroll center center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  pointer-events: none;
  display: none;
}
.fvp-overlay .fvp-actionicon.play,
.fvp-dynamic .fvp-actionicon.play {
  display: block;
  background-image: url('../img/playicon.png');
}
.fvp-overlay .fvp-actionicon.load,
.fvp-dynamic .fvp-actionicon.load {
  display: block;
}
.fvp-overlay .fvp-actionicon.load.w,
.fvp-dynamic .fvp-actionicon.load.w {
  background-image: url('../img/loadicon_w.gif');
}
.fvp-overlay .fvp-actionicon.load.b,
.fvp-dynamic .fvp-actionicon.load.b {
  background-image: url('../img/loadicon_b.gif');
}
#DOMWindow {
  background: transparent center center no-repeat;
  width: auto;
  height: auto;
  margin: auto auto;
  overflow: hidden;
  background-image: url('../img/loadicon_w.gif');
}
.fvp-onload {
  display: none !important;
  height: 0;
  width: 0;
  visibility: hidden;
}
.featured-video-plus .wp-video a:not(.post-thumbnail) {
  display: none;
}
.no-js .featured-video-plus .wp-video a:not(.post-thumbnail) {
  display: inline;
}
.featured-video-plus.fvp-responsive.fvp-spotify .fluid-width-video-wrapper {
  padding-top: 100% !important;
}
  • Вопрос задан
  • 218 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы