网页入门1：视频/MP3外链嵌入文章CSS

1、视频原链接

本案所使用的Video：
视频链接：https://www.bilibili.com/video/BV1MC41177oq/?share_source=copy_web&vd_source=411b78d992c07aa656f3ebd1e9fce52f

本案所使用的Audio：
mp3链接：https://i.y.qq.com/v8/playsong.html?songid=230455456&songtype=0

2、Html格式

<iframe id="video-iframe" src="///player.bilibili.com................=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>


<style>
  /* 默认样式，适用于大屏幕 */
  #video-iframe {
    width: 100%;
    height: 498px; /* 这是你为大屏幕设置的高度 */
  }

  /* 媒体查询，适用于屏幕宽度小于768像素的设备，如手机 */
  @media (max-width: 768px) {
    #video-iframe {
      height: 65%; /* 这是你为小屏幕设置的高度，以保持16:9的比例 */
    }
  }
</style>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=宽度参数 height=高度参数 src=" mp3链接"></iframe>

3.适应不同屏幕尺寸

<style>
  /* 默认样式，适用于大屏幕 */
  #video-iframe {width: 100%;height: 498px;}
  /* 媒体查询，适用于屏幕宽度小于768像素的设备，如手机 */
  @media (max-width: 768px) {#video-iframe {height: 100%;}

效果预览：

注：auto值改变初始播放状态

4.适用的第三方

在保证嵌入合法的前提下，国内在线视频媒体平台中支持托管和分享第三方主要有：

1. 腾讯视频
2. 优酷
3. 爱奇艺
4. 哔哩哔哩 (Bilibili)
5. 西瓜视频
6. 土豆视频
7. 网易云音乐
8. QQ音乐等

特例：抖音

抖音视频的URL通常是由抖音平台自动生成的，用户无法直接创建或修改。即使视频版权属于自己，通过其他工具生成内嵌代码再嵌入，也可能面临不合规问题。解决办法，稿件管理页面同步视频至西瓜视频。