YouTube HTML5 の再生に失敗した場合の対処法

YouTube HTML5 再生エラーの解決策: 1. YouTube を開いてビデオを見つけ、ビデオの右下隅にある [共有] をクリックします。 2. 埋め込みを選択します。 3. iframe タグの幅と高さを削除します。 ; 4. iframe A 親要素に追加します。ビデオが画面全体に表示される割合を設定するだけです。

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、DELL G3 コンピューター

YouTube が表示された場合はどうすればよいですかhtml5の再生に失敗しますか？

YouTube ビデオを HTML に挿入

YouTube ビデオを Web ページに挿入する必要があります。タグ

方法:

YouTube を開いてビデオを見つけ、ビデオの右下隅にある [共有] をクリックします。 。

埋め込みを選択すると、次のようなコードが表示されます:

<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は文字列 iframe タグの内容ですが、そのようなコードはページ ファイルに直接配置されるため、デバッグや適切な調整ができません。

幅と高さは固定されており、調整できないためです。

解決策:

iframe タグの幅と高さを削除して、直接取得したビデオが圧縮されるようにします。したがって、親要素を 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>

iframe タグは絶対配置に設定され、幅と高さは 100% に設定され、親要素は配置されます。相対的に、padding-bottom:% を通じて、画面を占めるビデオの割合を設定します (自分で調整できます)

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

このようにして、アダプティブビデオを取得できます, CSS スタイルは自分で追加することもできます。

推奨学習: 「HTML ビデオ チュートリアル 」

以上がYouTube HTML5 の再生に失敗した場合の対処法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。