我设法找到了一种相对干净直接的方法。要查看其工作原理，请单击我的网页：http : //developersfound.com/yde-portfolio.html并将鼠标悬停在“ Youtube Demos”链接上。
以下是两个片段，展示了如何轻松完成此操作：
我通过iFrame实现了这一目标。假设此DOM是“ yde-home.html”，这是iFrame的来源。
<!DOCTYPE html>
<html>
<head>
<title>iFrame Container</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<style type="text/css">.OBJ-1 { border:none; }</style>
<script>
$(document).ready(function() {
$('#myHiddenButton').trigger('click');
});
</script>
</head>
<body>
<section style="visibility: hidden;">
<button id="myHiddenButton" onclick="$(location).attr('href', '"http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;");">View Full Screen</button>
</section>
<section class="main-area-inner" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:720px;">
<iframe src="http://www.youtube.com/embed/wtwOZMXCe-c?version=3&start=0&rel=0&fs=1&wmode=transparent;"
class="OBJ-1" style="position:absolute;left:79px;top:145px;width:1080px;height:720px;">
</iframe>
</section>
</body>
</html>
假设这是加载iFrame的DOM。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Full Screen Youtube</title>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {});
</script>
</head>
<body>
<iframe name="iframe-container" id="iframe-container" src="yde-home.html" style="width: 100%; height: 100%;">
<p>Your browser does not support iFrames</p>
</iframe>
</body>
</html>
我还对照W3c验证程序进行了检查，它验证了HTML5，没有错误。
还需要注意的重要一点是：Youtube嵌入URL有时会检查以查看请求是否来自服务器，因此可能有必要设置测试环境以侦听外部IP。因此，您可能需要在路由器上设置端口转发才能使此解决方案起作用。设置端口转发后，只需从外部IP（而不是LocalHost）进行测试。请记住，某些路由器需要从LocalHost / loopback进行端口转发，但是大多数路由器使用与登录路由器相同的IP。例如，如果您的路由器登录页面为192.168.0.1，则转发端口必须使用192.168.0。在哪 可以是任何未使用的数字（您可能需要进行实验）。从该地址，您将添加测试环境监听的端口（通常为80、81、8080或8088）。