@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

.link-description,
.link-title {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}
.link-description{
  font-size: .8em;
}

.video-link .link-title {
  font-weight: bold;
}

.video-link .link-icon {
  visibility: hidden;
  position: absolute;
  top: calc(50% - .5em);
}

.video-link>.link-icon {
  left: .1em;
  font-size: 1.8em;
}

.link-title>.link-icon {
  left: -1.1em;
}

[data-player]{
  opacity: .5;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  border: 1px solid transparent;

  font-size: 1rem;
  line-height: 1.4em;
  
  margin: 2px auto;
  padding: 4px 1.2em 4px 2.2em;
  position: relative;
}
[data-player].initialized{
  opacity: 1;
}
.videolink{
  cursor: pointer;
  border-radius: 4px;
  position: relative;
}

.videolink .link-icon {
  visibility: visible;
}
.font-icon {
  margin: .1em .2em 0;
}

.videolink.loading,
.videolink.seeking{
  opacity: .8;
}
.videolink:hover {
  background-color: rgba(0,0,0,.1);
}
.videolink.loading{
  background-color: rgba(0,0,0,.1);
}
.videolink.seeking{
  background-color: rgba(0,0,0,.1);
}
.videolink.seeking:before,
.videolink.loading:before{
  content:'';
  width:20px;
  height:20px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  position: absolute;
  background: url('../ee/0/img/svg.php?ion/md-sync&color=fff&fill=fff&opacity=1') transparent center center no-repeat;
  background-size: contain;
  animation: spin linear 5000ms infinite;
}