Resizing in html and CSS

Question

if i want to resize the embedded youtube thumbnail specifically for mobile devices how should i define the height and width, as even in PX or in % it will change both for desktop and mobile, but i want it to be resized only for mobile. is it possible in the html embedded code of the video .. plz guide

Answer 1

use '@media' in CSS to define styles depending on screen sizes.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Answer 2

@media only screen and (max-width: 500px) { #myvideo { width: 80vw;}}

in this example CSS applies styles for screens with less than 500px width. the width of the video is 80vw/80% of the screen width.

ok?

Answer 3

should i use the viewport and if yes how. plz guide.

Answer 4

so i have to use the #idname for every video that i will embed..is I am getting correctly

Answer 5

you can use one class for all videos

Answer 6

yeah.. just did the same as u guided.. thanks a lot bro. u really rock !!! ☺