youtube html5播放失败怎么办

藏色散人
Lepaskan: 2023-02-03 09:46:46
asal
2058 orang telah melayarinya

youtube html5播放失败的解决办法:1、打开youtube,找到视频,在视频右下角点击分享;2、选择嵌入;3、去除iframe标签里面的width和height;4、为iframe添加一个父元素,设置一个让视频填满屏幕的百分比即可。

youtube html5播放失败怎么办

本教程操作环境:Windows10系统、HTML5版、DELL G3电脑

youtube html5播放失败怎么办?

HTML插入Youtube视频

网页需要插入youtube视频,直接用标签


方法:

打开youtube,找到视频,在视频右下角点击分享。

选择嵌入,就会得到代码如下:

Salin selepas log masuk

这是一串iframe标签内容,但是这样的代码直接放到页面文件里面,不能很好地调试和自适应。

因为宽度和高度都是固定的,无法调整。

解决:

去除iframe标签里面的width和height,这样直接得到的视频是压缩的,所以要为iframe添加一个父元素

Salin selepas log masuk

iframe标签设为绝对定位,宽度高度都设100%,父元素相对定位,通过padding-bottom:%,设置一个让视频填满屏幕的百分比(可自行调试)

.youtube{padding-bottom: 57%;position: relative;}.elementor-video-iframe{max-width: 100%;width: 100%;border: none;position: absolute;height: 100%;}
Salin selepas log masuk

这样就能得到一个自适应的视频了,css样式也可以自己添加。

推荐学习:《HTML视频教程

Atas ialah kandungan terperinci youtube html5播放失败怎么办. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!