HTML - Media

    //IMAGES
    <img src="img/ballon.jpg" srcset="img/big.jpg 2x, img/small.jpg 1x" /> 
    <img src="img/ballon.jpg" srcset="img/big.jpg 2000w , img/small.jpg 1000w" sizes="(min-width:960px) 960px,100vw" />

    //srcset: 
    <img srcset="
    examples/images/image-384.jpg 1x, 
    examples/images/image-768.jpg 2x
    " alt="…">

    <img
    sizes="(min-width: 400px) 80vw, 100vw"
    srcset="examples/images/small.jpg 375w,
    examples/images/big.jpg 1500w"
    alt="…">

    //PICTURE 
    <picture>
    <source srcset="extralarge.jpg" media="(min-width: 1000px)">
    <source srcset="large.jpg" media="(min-width: 800px)">
    <img srcset="medium.jpg" alt="…">
    </picture>

    SrcSet: change img source depending on your page width
    <picture>
    <source media="(max-width: 799px)" srcset="elva-480w.jpg">
    <source media="(min-width: 800px)" srcset="elva-800w.jpg">
    <img src="elva-800w.jpg">
    </picture>

    //CANVAS
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    </canvas> //Create Graphics via Javascript

    //VIDEO
    <video width="320" height="240" controls autoplay muted>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
    </video>
    

    //iFRAME
    <div class="videoWrapper">
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
    </div>

    //IFRAME YOUTUBE
    <iframe width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
    <iframe width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
    </iframe>

    //AUDIO
    <audio controls autoplay muted>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>