Lösungen ,

html-datei-ueber-andere-einblenden.php

Quell Code

<!DOCTYPE html>
<html>
<head>
<title>Webcams aus meiner Stadt mit Laufschrift als html Datei</title>
<meta charset="UTF-8">
<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.box{
  height:100vh;
  width:100vw;
  display:flex;
  flex-direction:column;
}
.line{
  display:flex;
}
.linetop{
  flex:2;
}
.linebottom{
  flex:1;
}
#kamera1{
  flex:2;
  height:calc(100% - 22px);
}
.column{
  display:flex;
  flex:1;
  flex-direction:column;
}
.line .unten{
  flex:1;
}
.small .frame{
  flex:1;
}
iframe{
  width:100%;
  height:100%;
}
.frame{
    display:flex;
    flex-direction:column;
}
h3{
  background:lightgrey;
}
h3:hover{
  background:green;
  cursor:pointer;
}
</style>
</head>
<body>   
   <div class="box">
      <div  class="line linetop">
           <div id="kamera1">
               <h3 id="bigtext">Kamera Live Markt</h3>
               <iframe  id="big" src="https://webcam.minden-wlan.de:10000/axis-cgi/mjpg/video.cgi?resolution=800x450&dummy=1645396238487"></iframe>
           </div>
           <div class="small column">
                 <div class="frame">
                    <h3>Kamera Live Hagemeyer</h3>
                    <iframe  id="kamera2" src="https://www.hagemeyer.de/fileadmin/webcam/current.jpg"></iframe>
                </div>
                <div class="frame">
                    <h3>Kamera Live kantlersweide</h3>
                    <iframe  id="kamera3" src="http://webcam2.minden-wlan.de:10000/axis-cgi/mjpg/video.cgi?resolution=800x450&dummy=1645396183951"></iframe>
               </div>
          </div>
      </div>
  
      <div class="line linebottom">
          <div class="frame unten">
                 <h3>Kamera Eingang </h3>
                 <iframe id="kamera4" src="https://cam.mwpw.de/cam1.jpg"></iframe>
          </div>
          <div class="frame unten" id="kamera5">
                 <h3>Porta westfalica berg </h3>
                 <iframe id="kamera5" src="https://cam.mwpw.de/cam3.jpg"></iframe>
          </div>
          <div class="frame unten">
                 <h3>Porta westfalica berg </h3>
                 <iframe id="kamera6" src="https://cam.mwpw.de/cam2.jpg"></iframe>
          </div>
     </div>
   </div>
<script>  
bu=document.querySelectorAll('h3');
bu.forEach((u)=>{
    u.addEventListener('click',function(){
         let text=u.innerHTML;
         let alttext=document.getElementById('bigtext').innerHTML; document.getElementById('bigtext').innerHTML=text; 
         u.innerHTML=alttext;
         var neu=u.nextElementSibling.getAttribute('src');
         var alt=document.getElementById('big').getAttribute('src');
         var id=u.nextElementSibling.getAttribute('id');  
         u.nextElementSibling.setAttribute('src',alt);
         console.log('alt '+alt); //document.getElementById('big').setAttribute('src','');
         console.log('neu '+neu);
         document.getElementById('big').setAttribute('src',neu);
    });
  
})
</script>
<object id="obj_dateilesen" data="text-von-php-erstell.php" type="text/html"></object>
<script>
window.onload = function () {
        var object = document.querySelector('#obj_dateilesen');
        var doc = object.contentDocument;
        doc.documentElement.style.overflow = 'hidden';
        doc.body.style.overflow = 'hidden';
        var contentsHeight = doc.documentElement.offsetHeight;
        object.style.height = '100vh';
        object.style.width='100vw';
        object.style.position='absolute';
        object.style.top=0;
        object.style.left=0;
        p=doc.querySelector('p');
        let st = document.createElement("style");
        let vorp = p.parentNode
        st.innerHTML='p {   background:rgba(0,0,0,0);  filter: blur(0.08em);         margin: 0 auto;   width:40%;  padding:10px;  overflow: hidden;   position:absolute;  top:0; left:0; color: lime; animation:lauf 10s linear infinite;}@keyframes lauf{  0%{    top:120vh;  }  100%{    top:-140vh;  }}';
        vorp.insertBefore(st, p)
}
</script>
</body>
</html>