patak2

<!DOCTYPE html>
<html lang="hr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 multimedija</title>
    <link href="css/style.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Mukta:300" rel="stylesheet">

</head>
<body>

<div id="omot">
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

<h1>Vimeo video</h1>

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/317770729" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

<h1>YouTube video</h1>
<div class="yt-container"><iframe width="992" height="420" src="https://www.youtube.com/embed/MF2JVCipojA" frameborder="0" allowfullscreen></iframe></div>

<footer>Copyright &copy; 2019. All rights reserved</footer>
</div>

</body>
</html>


body {
    margin:0;
    padding:0;
    font-size:100%;
    font-family: 'Mukta', sans-serif;
}

* { box-sizing:border-box; }

#omot {
    margin: 0 auto;
    /*padding-left:10px;
    padding-right:10px;*/
    max-width: 992px;
    width:100%;
    background:#44d8e5;
}

h1{
    text-align:center;
    margin-bottom:0;
}

.yt-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.yt-container iframe,
.yt-container object,
.yt-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

header, footer {
  background-color: #2f2f2f;
}

header {
    padding: 15px 0;
    margin-bottom: 15px;
}
header li {
    margin-left:20px;
}
header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display:flex;
    justify-content:center;
}
header ul li a {
    font-size:1.2em;
    color: #a1a1a1;
    text-decoration: none;
    font-weight:bold;
    text-transform: uppercase;
    padding:5px 8px 5px 8px;
    transition:all .4s ease-in-out;
}

header ul li a:hover {
    background:white;
    text-shadow:2px 2px 0 deepskyblue;
}


footer {
    color: #ededed;
    margin-top:10px;
    padding: 15px 0;
    text-align:center;
}


@media screen and (max-width: 400px) {
    header {
        padding: 10px 0;
    }
    header li {
        margin-left:5px;
    }
    header ul li a {
        font-size:1em;
    }

}