Finally, you can view the resized YouTube video on a phone by accessing your HTML page through a mobile browser or by using responsive design techniques to ensure proper rendering for various screen sizes.Customize the CSS as needed, adjusting dimensions, colors, or any other styling aspects.The `iframe` within the container is then positioned absolutely to cover the entire container. In the CSS code above, `padding-bottom` is set to maintain an aspect ratio of 16: Padding-bottom: 56.25% /* 16:9 aspect ratio (divided height by width) */ Apply CSS styles to the container to resize it for mobile devices.Create a container div element for the video in your HTML file.Obtain the YouTube video's embed code by clicking on the 'Share' button below the video on YouTube and selecting the 'Embed' option. Firstly, embed the YouTube video using the YouTube embed code.To resize a YouTube video to display on a phone in HTML, you can utilize CSS to modify the dimensions of the video container. The current solution works in the same way for HTML5 videos as for YouTube videos.Ĭontinue reading here: Great features for responsive web design using сalc in CSS3 Now, it's clear how we got padding-bottom: 56.25% for aspect ratio of 16:9 and padding-bottom: 75% for 4:3 aspect ratio. Īctually here is a formula to calculate the value of the padding-bottom property for a video with any possible aspect ratio: height / width * 100Ĭalculations for current examples: 9 / 16 * 100 = 56.25 If you want to use them for videos with 16:9 aspect ratio, you will need to replace the value of padding-bottom CSS property with the following padding-bottom: 56.25%. The styles above are developed for videos with aspect ratio of 4:3. This fact has to be taken into consideration when you are going to use this solution.

Standard aspect ratio for a video is 4:3, but nowadays a lot of videos are created in widescreen format with aspect ratio of 16:9. Here is the main thing which you have to know about the styles above to fully use them for other videos.Įvery video has its own aspect ratio. Now the YouTube video above adjusts its size to its container width.

Iframe html code for resizing video