Bekijk de onderstaande video om te zien hoe je onze site als een web app op je startscherm installeert.
Opmerking: Deze functie is mogelijk niet beschikbaar in sommige browsers.
Normaal gesproken kan je deze via SFTP of FTP gewoon uploaden. En met de video-tag embedden.
<video width="320" height="240" controls poster="LEEG/hondmetcorona.jpg">
<source src="LEEG/day1.mp4" type="video/mp4"
>
<source src="LEEG/day2.mp4" type="video/mp4">
https://www.w3schools.com/html/html5_video.asp
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
<!-- youtube javascript voor playlist -->
<script type="text/javascript">function ytplay(v){var ytp=document.getElementById('ytplayer');
ytp.src='//youtube.com/embed/'+v+'?autoplay=1&rel=0&showinfo=0&autohide=1';scroll(0,125);}
</script>
<!-- YouTube iframe -- zet in de iframe alvast het 1e nummer -->
<div class="iframe-16-9">
<iframe id="ytplayer" type="text/html" frameborder="0" width="560" height="315" src="https://www.youtube.com/embed/ELKbtFljucQ?version=3&autoplay=0&rel=0&showinfo=0&autohide=1" allowfullscreen></iframe>
</div>
<!-- playlist -->
<div class="yt-playlist">
<a class="yt-item" onClick="ytplay('ELKbtFljucQ')" href="javascript:void(0)">
<div class="yt-thumb">
<img src="http://img.youtube.com/vi/ELKbtFljucQ/0.jpg" alt="" />
</div>
<div class="yt-desc">
<h3>Paolo Nutini - Iron Sky</h3>
<p>Hier kan je wat tekst over Paolo Nutini zetten.</p>
</div>
</a>
<a class="yt-item" onClick="ytplay('mdiBvuhnyQo')" href="javascript:void(0)">
<div class="yt-thumb">
<img src="http://img.youtube.com/vi/mdiBvuhnyQo/0.jpg" alt="" />
</div>
<div class="yt-desc">
<h3>Steffen Morrison - A Song For You</h3>
<p>Wat verhalen over Steffen Morrison of iets anders.</p>
</div>
</a>
<a class="yt-item" onClick="ytplay('C_3d6GntKbk')" href="javascript:void(0)">
<div class="yt-thumb">
<img src="http://img.youtube.com/vi/C_3d6GntKbk/0.jpg" alt="" />
</div>
<div class="yt-desc">
<h3>Zayn - PillowTalk </h3>
<p>Achtergrond informatie over Zayn enzovoort.</p>
</div>
</a>
</div><!--/playlist-->
/* container */
.iframe-16-9, .yt-playlist {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
}
.iframe-16-9 *, .yt-playlist * {
box-sizing: border-box;
}
@media (min-width: 768px) {
.iframe-16-9, .yt-playlist {
width: 50%;
}
}
/* youtube iframe */
.iframe-16-9 {
position: relative;
display: block;
padding: 0;
overflow: hidden;
}
.iframe-16-9::before {
display: block;
content: "";
padding-top: 56.25%;
}
.iframe-16-9 iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
/* playlist */
.yt-playlist {
margin-top: 30px;
border-top: 1px solid #ccc;
}
.yt-item {
display: block;
width: 100%;
margin: 0;
padding: 5px 0;
text-decoration: none;
overflow: hidden;
border: 1px solid #ccc;
border-width: 0 0 1px 0;
}
.yt-item:hover, .yt-item:active, .yt-item:focus {
outline: none;
text-decoration: none;
}
.yt-item::after {
display: block;
clear: both;
content: "";
}
.yt-thumb {
float: left;
width: 25%;
}
.yt-thumb img {
width: 100%;
margin: 0;
padding: 0;
}
.yt-desc {
float: left;
width: 75%;
padding-left: 15px;
}
.yt-desc h3, .yt-desc p {
margin: 0;
padding: 0;
font-size: 18px;
line-height: 1.6;
color: #333;
}
.yt-desc p {
font-size: 16px;
line-height: 1.5;
}
Yep, het werkt niet met de <video>Dat werkt dus wel met YouTube
Ikzelf gebruik ook VideoJS als speler op mijn website. Die is makkelijk te stylen en uit te breiden.
Ook ondersteunt deze YouTube video's.
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.