js使用iframe引入youtube视频到页面中播放,解决跨域播放

首先肯定要能翻墙了，才能播放youtube视频

直接上代码

这里的主要原理是使用的embed-container,这是一个html的 class

实际标签是这样的，iframe中引入的youtube视频链接，不建议写这么复杂，看下面

</div>

但是其实只要把链接修改一下就好了，下面是我动态js创建的iframe,然后把youtube

视频链接转换一下，放到iframe的src上，然后再添加到div中就可以加载出youtube视频（需要梯子看），可以点击观看

url 就是带有https/http链接的，这里是https,例如url= 'https://www.youtube.com/watch?v=pqkMbz2MIKA'

let tmpUrl = url.replace('https:','') // 去掉https:

// watch?转化成embed/,添加wmode,这个wmode可以自己去学习看看

tmpUrl = tmpUrl.replace('watch?v=','embed/')+'?wmode=transparent'

// 然后创建iframe,使用哪个tmpUrl就可以了
var exec_obj = document.createElement('iframe');
exec_obj.name = 'tmp_frame';
exec_obj.src = tmpUrl ; //可以访问controller携带参数
//exec_obj.style.display = 'none';
document.body.appendChild(exec_obj);

js使用iframe引入youtube视频到页面中播放,解决跨域播放相关推荐

Django 【第十九篇】JS实现的ajax、同源策略和前端JSONP解决跨域问题
一.回顾jQuery实现的ajax 首先说一下ajax的优缺点优点:AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面 ...
php怎么播放大视频教程,PHP获取各大视频网站页面中的Flash播放地址_PHP教程
有很多朋友做电影网站都是直接用大视频网站的flash播放地址了,这样如果我们不影响到自己网服务器,下面小编来给大家介绍一下利用PHP获取各大视频网站页面中的Flash播放地址实例. 先看一个简单的然 ...
Node.js 模块化的操作，简单明了的代码帮助你明白后端的实现和前端之前的交互，及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...
iframe解决跨域ajax请求的方法
iframe跨域的基本前提是,一个页面可以嵌套非同源站点的html文件,以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求.当一个域名为domain1下的页面A想要向domain ...
服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式使用postMessag ...
前后端分离，如何解决跨域（代理模式）、路由拦截（进入页面需要登录）以及请求拦截（登录TOKEN失效）等问题（初学者）
前端时间项目需要发布一个较大的版本,工作比较忙,加了好多个晚上的班,感觉自己有点缺氧了.最近稍微闲下来了,顺便调休了三天,刚刚给家里来了个大扫除,看着这干干净净的小家,心里顿时舒服了很多. 下面进入正 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
Vue项目开发过程中解决跨域问题（vue.config.js结合axios）
一.问题描述在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错: // 控制台报错信息 Access to XMLHttpRequest at 'http://x. ...
学会iframe并用其解决跨域问题
了解iframe 官方定义为:iframe是HTML标签,作用是文档中的文档,或者浮动的框架(FRAME).iframe元素会创建包含另外一个文档的内联框架(即行内框架). 简单理解为:iframe是 ...