视频嵌入

直链视频

<video src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" controls="controls" loop="-1"> <p>你的浏览器不支持video标签.</p> </video>

效果如下

注意：添加autoplay="autoplay"可自动播放

哔哩哔哩

直接从视频网页分享获取嵌入代码即可

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=115790607024273&bvid=BV1vqBkBrEo1&cid=35012739236&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ></iframe>

效果如下

注意：需要在视频url最末添加&autoplay=0以禁用自动播放

CSS统一风格

可以看出默认情况下宽高对齐都不是很适合文章，这里还是使用CSS统一风格

/* 针对 WordPress 博客正文区域内的直链视频生效 */
/* 使用 video 标签直接嵌入的视频文件 */
.entry-content video {
  width: 98%; /* 视频播放器放大到显示区域的98% */ 
  max-width: 100%; /* 确保视频不会超出容器 */
  display: block; /* 将视频设置为块级元素，以便使用 margin: auto 居中 */ 
  margin: 0 auto; /* 水平居中视频 */ 
  aspect-ratio: 16 / 9; /* 保持视频播放器16:9的宽高比 */ 
  border-radius: 5px; /* 给视频播放器添加圆角 */ 
  background-color: #000; /* 视频加载前或无内容时的背景色 */
  object-fit: contain; /* 确保视频内容在框内完整显示，不裁剪 */
}

/* 针对 WordPress 博客正文区域内的哔哩哔哩嵌入视频生效 */
/* 通过其 src 属性包含 "bilibili.com" 的 iframe 进行选择 */ 
.entry-content iframe[src*="bilibili.com"] { 
  width: 98%; /* iframe 放大到显示区域的98% */ 
  max-width: 100%; /* 确保 iframe 不会超出其容器 */
  display: block; /* 将 iframe 设置为块级元素，以便使用 margin: auto 居中 */ 
  margin: 0 auto; /* 水平居中 */ 
  aspect-ratio: 16 / 9; /* 保持视频播放器16:9的宽高比 */ 
  border: none; /* 移除可能存在的默认 iframe 边框 */ 
  border-radius: 5px; /* 给视频播放器添加圆角 */ 
}

文档嵌入

pdf文件需要用到pdf.js，office文件需要用到微软在线接口

拼接url

https://res.oplist.org/pdf.js/web/viewer.html?file=
https://view.officeapps.live.com/op/embed.aspx?src=

ifame嵌入代码

为了便于统一调整格式，引入class="file-viewer-container"类

对于pdf文件

<!-- 预览 -->
<div class="file-viewer-container" style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%;">
  <iframe
    src="https://res.oplist.org/pdf.js/web/viewer.html?file=文件url"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen
    webkitallowfullscreen
    mozallowfullscreen
    title="文件预览"
    loading="lazy"
  >
    您的浏览器不支持iframe，请下载附件！
  </iframe>
</div>

对于office文件

<!-- 预览 -->
<div class="file-viewer-container" style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%;">
  <iframe
    src="https://view.officeapps.live.com/op/embed.aspx?src=文件url"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen
    webkitallowfullscreen
    mozallowfullscreen
    title="文件预览"
    loading="lazy"
  >
    您的浏览器不支持iframe，请下载附件！
  </iframe>
</div>

自定义CSS

/* 统一文件 预览容器样式*/
/* 1. PDF 预览容器样式 */
.entry-content .file-viewer-container {
    width: 100% !important; /* 强制统一宽度 */
    max-width: 100% !important; /* 强制最大宽度 */
    margin: 0 auto !important; /* 强制水平居中 */

    /* 响应式宽高比的关键设置（以下示例为 4:3 宽高比） */
    position: relative !important;
    padding-bottom: 75% !important; /* 强制宽高比 */
    height: 0 !important; /* 强制高度 */
    overflow: hidden !important; /* 强制隐藏溢出 */

    border-radius: 5px !important; /* 强制圆角 */
    border: 1px solid #e0e0e0 !important; /* 强制边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; /* 强制阴影 */
    background-color: #f0f0f0 !important; /* 强制背景色 */
}

/* 2. 文件 预览 iframe 样式 */
.entry-content .file-viewer-container iframe {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important; /* 强制移除 iframe 边框 */
    background-color: transparent !important; /* 强制背景透明 */
}

geogebra课件

在Geogebra社区搜索需要的课件，或者自己制作并发布到社区。

找到课件之后，点击右上角三个点再点详细信息

再点分享-嵌入获取嵌入代码

<iframe scrolling="no" title="正弦定理" src="https://www.geogebra.org/material/iframe/id/pP86kbJA/width/800/height/500/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="800px" height="500px" style="border:0px;"> </iframe>