Copy the Code bellowto Embed my Cam’s on Youre Website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Peep My Cam</title>
<style>
body {
background-color: black;
color: white;
text-align: center;
font-family: Arial, sans-serif;
}
.thumbnail {
width: 240px;
height: 180px;
margin: 10px;
cursor: pointer;
}
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}
.lightbox-content {
position: relative;
width: 760px;
height: 440px;
}
.close-btn {
position: absolute;
top: 35px;
right: 10px;
background-color: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<br>
<br>
<center>Recording off my Camera's is allowed for Personal Use Only !</center>
<br>
<div>
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/0?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page1.html')" alt="Thumbnail 1">
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/1?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page2.html')" alt="Thumbnail 2">
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/2?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page3.html')" alt="Thumbnail 3">
<br>
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/3?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page4.html')" alt="Thumbnail 4">
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/4?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page5.html')" alt="Thumbnail 5">
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/5?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page6.html')" alt="Thumbnail 6">
<br>
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/6?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page7.html')" alt="Thumbnail 7">
<img class="thumbnail" src="http://keesje1980.ddns.net:8200/Jpeg/7?authToken=19322e5c-5e3e-4dab-a92b-0ae714b85051
" onclick="openLightbox('http://keesje1980.ddns.net/Cams/Keesje/Page8.html')" alt="Thumbnail 8">
</div>
<br>
<div class="lightbox" id="lightbox">
<div class="lightbox-content">
<button class="close-btn" onclick="closeLightbox()">Close</button>
<iframe id="lightbox-iframe" width="760" height="440" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<script>
function openLightbox(url) {
document.getElementById('lightbox-iframe').src = url;
document.getElementById('lightbox').style.display = 'flex';
}
function closeLightbox() {
document.getElementById('lightbox').style.display = 'none';
document.getElementById('lightbox-iframe').src = '';
}
</script>
</body>
</html>