What to do if youtube html5 playback fails

Solution to youtube html5 playback failure: 1. Open YouTube, find the video, and click Share in the lower right corner of the video; 2. Select embed; 3. Remove the width and height in the iframe tag; 4. Add to the iframe A parent element, just set a percentage that allows the video to fill the screen.

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

What should I do if YouTube html5 playback fails?

Insert YouTube video into HTML

You need to insert a YouTube video into the webpage. Directly using the tag 39000f942b2545a5315c57fa3276f220 will not play it. We know that 39000f942b2545a5315c57fa3276f220 is only supported Video files such as mp4 and ogg.

Method:

Open YouTube, find the video, and click Share in the lower right corner of the video.

Choose to embed, you will get the code as follows:

<iframe width="560" height="315" src="https://www.youtube.com/embed"    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

This is a string iframe tag content, but such code is placed directly in the page file and cannot be debugged and adapted well.

Because the width and height are fixed and cannot be adjusted.

Solution:

Remove the width and height in the iframe tag, so that the video obtained directly is compressed. So you need to add a parent element to the iframe

<div class="youtube">
       <iframe width="100%" class="elementor-video-iframe" src="https://www.youtube.com/embed" 　　　　　　frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>       </iframe></div>

The iframe tag is set to absolute positioning, the width and height are set to 100%, and the parent element is positioned relatively, through padding-bottom:%, set a let The percentage of the video filling the screen (can be adjusted by yourself)

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

In this way, you can get an adaptive video, and the css style can also be added by yourself.

Recommended study: "HTML Video Tutorial"

The above is the detailed content of What to do if youtube html5 playback fails. For more information, please follow other related articles on the PHP Chinese website!