能否实现iframe嵌入的Dailymotion视频全屏及横竖屏旋转？

嘿，这个需求完全可以实现！我之前帮朋友处理过类似的场景，下面给你一步步拆解具体怎么做：

1. 配置iframe基础属性，开启核心权限 #

首先，你需要给嵌入的iframe加上必要的权限属性，确保浏览器允许它进入全屏模式，同时为横竖屏旋转准备传感器权限：

<iframe 
  id="dailymotion-player"
  src="https://www.dailymotion.com/embed/video/你的视频ID" 
  width="100%" 
  height="360" 
  frameborder="0"
  allow="fullscreen; accelerometer; gyroscope"
  allowfullscreen
></iframe>

这里重点说两个关键配置：

• allowfullscreen：传统的全屏权限声明，确保播放器能触发系统级全屏
• allow="fullscreen; accelerometer; gyroscope"：现代浏览器的权限策略，accelerometer和gyroscope用来读取设备旋转传感器数据，让播放器能自动响应横竖屏变化

2. 优化页面Viewport，适配设备旋转 #

移动端上，页面的Viewport设置会直接影响播放器对横竖屏的响应，一定要在页面<head>里加上这段meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这个标签会让页面宽度适配设备屏幕，同时禁止用户缩放，确保播放器能随设备旋转自动调整尺寸比例。

3. 用Dailymotion API实现自定义横竖屏控制 #

如果需要更灵活的行为（比如通过按钮强制横屏播放，或者旋转时自动切换全屏），可以借助Dailymotion官方Player API来实现：

首先引入API脚本：

<script src="https://api.dmcdn.net/all.js"></script>

然后初始化播放器并监听设备旋转事件：

// 初始化播放器
const player = DM.player('dailymotion-player', {
  video: '你的视频ID',
  width: '100%',
  height: '360'
});

// 监听设备横竖屏切换
window.addEventListener('orientationchange', () => {
  const isLandscape = window.orientation === 90 || window.orientation === -90;
  if (isLandscape) {
    // 横屏时设置播放器为全屏尺寸
    player.setSize(window.innerWidth, window.innerHeight);
    // 注意：部分浏览器不允许自动触发全屏，建议配合用户手动操作（比如按钮点击）
    player.requestFullscreen().catch(err => {
      console.log('全屏请求失败：', err);
    });
  } else {
    // 竖屏时恢复原尺寸
    player.setSize('100%', '360');
    player.exitFullscreen();
  }
});

常见坑点提醒 #

• 确保iframe的src是Dailymotion官方嵌入链接（格式为https://www.dailymotion.com/embed/video/VIDEO_ID），不要用普通视频页面链接
• 部分移动端浏览器限制自动全屏，必须由用户手动触发（比如点击播放器或自定义按钮）
• 测试时记得关闭设备的「旋转锁定」功能，否则横竖屏切换不会生效

内容的提问来源于stack exchange，提问作者Allu Arjun