diedVIPs

html knowhow

Iframe mit Menübar aufrufen









Iframe mit Menübar aufrufen

So sieht´s aus




Quellcode
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/js/uikit-icons.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/uikit@3.4.6/dist/css/uikit.min.css" rel="stylesheet" />

<style type="text/css">
#video-container iframe{position:absolute; padding-bottom:0; left:25%; width:50%; height:60%;}
.uk-button-secondary.uk-active,.uk-button-secondary:active {background-color:#111;color:#fff; font-weight:bold;}
.uk-button-secondary:focus,.uk-button-secondary:hover {background-color:#2d2b2b;color:red; font-weight:bold;}
</style>
</head>

<body >
<div id="header-bar" class="uk-card" style="border: 1px solid #000; z-index: 5; width:60%">
<div id="header-slider"><div class="uk-position-relative uk-slider uk-nav-navbar uk-toggle" uk-slider="">
<ul class=" uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-6@m uk-child-width-1-6@l uk-grid uk-grid-small" style="transform: translateX(9px);">
<button onclick="changeSrc('')" class="server uk-button uk-button-secondary uk-button-small uk-inline uk-text-capitalize" data-id="1"><span uk-icon="icon: play;ratio: 2"></span> Film 1</button>
<button onclick="changeSrc('')" class="server uk-button uk-button-secondary uk-button-small uk-inline uk-text-capitalize" data-id="2"><span uk-icon="icon: play;ratio: 2"></span> Film 2</button>
<button onclick="changeSrc('')" class="server uk-button uk-button-secondary uk-button-small uk-inline uk-text-capitalize" data-id="3"><span uk-icon="icon: play;ratio: 2"></span> Film 3</button>
<button onclick="changeSrc('')" class="server uk-button uk-button-secondary uk-button-small uk-inline uk-text-capitalize" data-id="4"><span uk-icon="icon: play;ratio: 2"></span> Film 4</button>
<button onclick="changeSrc('')" class="server uk-button uk-button-secondary uk-button-small uk-inline uk-text-capitalize" data-id="5"><span uk-icon="icon: play;ratio: 2"></span> Film 5</button>
<button onclick="changeSrc('')" class="server uk-button uk-button-secondary uk-button-small uk-inline uk-text-capitalize" data-id="6"><span uk-icon="icon: play;ratio: 2"></span> Film 6</button>
</ul>
<a class="uk-position-center-left uk-position-small" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small " href="#" uk-slidenav-next uk-slider-item="next"></a>
</div></div></div>
<div id="video-container">
<div class="server1 servers" style="display:none"><iframe src="http://meinsolargarten.de/Bilder/videos/Eichhörnchen.mp4" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe></div>
<div class="server2 servers" style="display:none"><iframe src="http://meinsolargarten.de/Bilder/videos/Eichhörnchen.mp4" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe></div>
<div class="server3 servers" style="display:none"><iframe src="http://meinsolargarten.de/Bilder/videos/Hörnchen24.1.22.mp4" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe></div>
<div class="server4 servers" style="display:none"><iframe src="http://meinsolargarten.de/Bilder/videos/EiHö28.12.21.mp4" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe></div>
<div class="server5 servers" style="display:none"><iframe src="http://meinsolargarten.de/Bilder/videos/Fuchs.mp4" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe></div>
<div class="server6 servers" style="display:none"><iframe src="http://meinsolargarten.de/Bilder/videos/Waschbär.mp4" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe></div>
</div>
<script>
function changeSrc(e){document.getElementById("sampleVideo") .src=e}$(document).ready(function(e){$(".server") .on("click",function(e){e.preventDefault();var t=$(this) .data("id");$("iframe").each(function(){var e=$(this).attr("src"); $(this).attr("src",e)}),$(".server").removeClass("active"),$(this).addClass("active") ,$(".servers").hide(),$(".server"+t).show()})});
</script>
</body>

</html>








Kontakt    Datenschutz    Impressum