/* 短代码-视频挂载 */

/* 视频容器 */
.video-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* 视频标题 */
.video-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333;
}

/* 视频切换标签容器 */
.video-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
}

/* 视频切换标签 */
.video-tab {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  color: #666;
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* 激活的视频切换标签 */
.video-tab.active {
  color: #007bff;
  background-color: #e7f3ff;
  font-weight: bold;
}

/* 视频切换标签悬停效果 */
.video-tab:hover {
  color: #0056b3;
  background-color: #f0f7ff;
}

/* 视频播放器容器 */
.iframe_div {
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  display: block;
  padding: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
}

/* 视频播放器 */
.iframe_div .iframe_video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* 正方形视频比例 */
.iframe_div:after {
  content: "";
  display: block;
  padding-top: 100%;
}

/* 16:9视频比例 */
.iframe_div-16x9:after {
  padding-top: 56.25%;
}

/* 视频URL隐藏字段 */
.video-urls,
.video-titles {
  display: none;
}

/* 视频Loading动画容器 */
.video-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

/* 显示Loading动画 */
.video-loading.show {
  opacity: 1;
  visibility: visible;
}

/* Loading动画样式 */
.video-loading::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Loading动画旋转效果 */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}