Answers for "media tags"

media query

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

media query

// Example media query syntax
@media only screen and (min-width: 768px) {
  .my-example-class {
    padding: 50px;
  }
}

// Best Practice
// keep default style for smallest screen size (portrait mobile, below 576px)
// and then proceed in assending order with media query like below

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// so on ...

how to display media in html

###                         How to display Media with html                         ###
_______________________________________________________________________________________






_________________________________________________________________________________________

###                         Image(s)                         ###


### You can easily add a img with this line of code :
<img src="Type here the location of your picture" />

### But you can also add a style to it like this :
<img src="Type here the location of your picture" class="type here the name of your style" />

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 


### If you want to keep it easy and not add a style you can also add details in the command itself
### like this :
<img src="Type here the location of your picture" width="type here a amount of pixels" />

### if you really want to customize it than i would recommend using a style



## Here is an example i made:
<img src="src/picture_beach.jpg" class="pictures" />

________________________________________________________________________________________

###                         Video(s)                         ###


### adding video(s) is somewhat more complicated than adding image(s) here is the basic way :
<video controls>

    <source src="Type here the location of your video" />
</video>

### To video(s) you can also add a style like this :
<video controls class="Type here the name of Your style">

    <source src="Type here the location of your video" />
</video>

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 



### you can also customize the video without using a style easily
<video controls autoplay poster="Type here the location of a picture for a thumbnail if you don't want one than don't put poster here">
    
    <source src="Type here the location of your video" />
</video>

### If you want to autoplay the video than type autoplay where i put it. If you don't want autoplay just don't put it there



## Here is an example i made:
<video controls autoplay poster="/img/beach.png">
    
    <source src="/video/sea.mp4" />
</video>

_______________________________________________________________________________________

###                         Audio(s)                         ###


### Adding a audio file is almost the same as adding a video file here is the basic code line :
<audio controls >

    <source src="Type here the location of your audio" />
</audio>

### just like adding a style to video(s) its done like this :
<audio controls  class="The name of your style" >

    <source src="The location of your audio" />
</audio>

### If you don't know how to make a style? i will be maybe uploading a tutorial on it later 



### You can customize the audio if you don't want to use a style very easy
<audio controls autoplay loop preload="" >

    <source src="The location of your audio" />
</audio>

### "autoplay" = It will play automaticly when you go to the html page
### "loop"     = If you add this the file will never stop playing. when it ends it will start over again
### "preload"  = You have 3 types of preloading. 1="auto" It will automaticly load. 2="metadata" It will load before the metadata. 3="none" It will just load 
### like it normaly does

### You can also add above or under the line <source> the words: "Your Browser does Not support This music File. Please Try another browser"
### You just have to add the text nothing else and it will display when the audio file can't load. 



## here is an example i made:
<audio controls autoplay loop preload="metadata" >
    <source src="/audio/audiofile3904.mp3" />
    Your Browser does Not support This music File. Please Try another Browser
</audio>

_______________________________________________________________________________________

# If this code helped you please leave a like on it. If you want to see more of this follow me
# Or just take a look at another answer of my answers
#
# THIS CODE HAS BEEN MADE BY : Vast Vicuña