embedded [youtube] videos not responsive

[J-Quest]

I have embedded (iframe) a [youtube] video on a Joomla 4 website. It works great on a PC, but on a mobile phone it is not responsive (the video is wider that the mobile screen). On my joomla 3 websites my embedded [youtube] videos are responsive. How do I make [youtube] videos responsive on a joomla 4 website. I think I have to use css, but don’t know what lines to use.

[Per Yngve Berg]

Have you tried this plugin?

https://extensions.joomla.org/extension/allvideos/

[J-Quest]

Thanks for the suggestion. However, I am trying to avoid extra extensions. In Joomla 3 it worked fine without an extension, so am looking for a way to get it to work in Joomla 4 without one.

[Per Yngve Berg]

Using an iframe is a bas idea. At least use a video tag.

https://www.w3schools.com/tags/tag_video.asp

[J-Quest]

I didn’t know about the video tag option (interesting). I used your link and also did some googling to understand the pros and cons of the HTML5 video tag vs iframe. For my requirements I think the iframe is the better options. The reason for my original question is because I saw a YT video by ‘Learn Joomla 4’ (Brian Teeman) titled Power Tips Embed [youtube] videos. In the comments he said we can get iframe embedded videos to be responsive by using css, but he did not say how.

[J-Quest]

I found a way to do this. This video is what I used https://www.[youtube].com/watch?v=0L8cQ9nRtuE It was a bit complicated and you need to know how to create and edit a user.css file and then you have to add code in the article (Toggle editor) which is the html code. Bit complicated but it works.

Also found the below useful (but above [youtube] video is all you need).
https://www.[youtube].com/watch?v=9YffrCViTVk
https://www.[youtube].com/watch?v=ul3mcXMX0gA
https://www.w3schools.com/howto/howto_c ... frames.asp
https://www.benmarshall.me/responsive-iframes/
https://usefulangle.com/post/142/css-video-aspect-ratio
https://www.w3docs.com/snippets/css/how ... h-css.html

[AMurray]

To me, it would have been easier just to use the plugin @Per mentioned.

The other way, is to use You-Tubes 'embed' code. You can find that on every video.

[brian]

To me, it would have been easier just to use the plugin @Per mentioned.

The other way, is to use You-Tubes 'embed' code. You can find that on every video.

The embed code is an iframe

For the css I referred to check out the output of https://embedresponsively.com/

[J-Quest]

Marian gave me this solution. Works well. Nothing else needed.

on user.css add these lines:
@media (max-width: 575.98px) {
iframe{
width:100%;
height:100%;
}
}