I am trying to create a browser (I got bored) and I want the user to be able to navigate between tabs.
This would need me to hide one iframe and show another one. I'm not sure how to do this using javascript. I also don't want the iframe to resize (like saying height: 0px;).
Here's my sandbox.
Thanks in advance.
You can add custom CSS to your iframe dynamically to hide and show.
Refer following code,
<!DOCTYPE html>
<html>
<head>
<style>
.custom-style {
width: 0;
height: 0;
position: absolute;
border: 0;
}
</style>
</head>
<body>
<iframe id="iframe"
width="300" height="200" src="https://www.youtube.com/embed/zFZrkCIc2Oc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>
<button onclick="onHide();">Hide Me<button>
<button onclick="onShow();">Show Me<button>
</body>
<script>
function onHide() {
document.getElementById('iframe').classList.add('custom-style');
}
function onShow() {
document.getElementById('iframe').classList.remove('custom-style');
}
</script>
</html>
wrap your iframe inside a div container and when you need to hide it just add a style or class to it and set it display style to none
html
<div class="hide">
<iframe></iframe>
</div>
css
.hide{
display: none;
}
Related
I've been tasked with creating a sort of Kiosk to display in an office, the Kiosk is suppose to cycle through the various advertising videos that I've been given, this part is easy enough as I found another post about that, however after each video they want a news stream to play for 10 minutes, then for the kiosk to go to the next video, and continue like this. the stream I'm trying to use is the embedded iframe for the sky news YouTube stream
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
I've tried a few things like trying to hide the existing element and show the other, but unfortunately I've never used HTML before being tasked with this so it's going about as well as can be expected
This is what I'm doing to display and cycle through the videos
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{
box-sizing: border-box;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
max-height: 100%;
max-width: 100%;
background-color: black;
}
</style>
</head>
<body>
<video src="Video1.mp4" id="video" autoplay></video>
<script>
var vidElement = document.getElementById('video');
var vidSources = [
"Video1.mp4",
"video2.mp4",
"Video3.mp4"
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// update the active video index
activeVideo = (++activeVideo) % vidSources.length;
if(activeVideo === vidSources.length){
activeVideo = 0;
}
// update the video source and play
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
</script>
</body>
</html>
I've tried adding to the existing script to preform the task of hiding the stream, by either setting the display of the element to none or by changing the hight and width to 0, neither of which worked for me. so either,
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>
<script>
document.getElementById("youtubeplay").style.display = 'none';
</script>
or
<iframe src="https://www.youtube.com/embed/9Auq9mYxFEE?controls=0&autoplay=1" title="YouTube video player" id="youtubeplay" frameborder="0"</iframe>
<script>
var liveElement = document.getElementById('youtubeplay');
liveElement.display = 'block'
liveElement.style.max-height = '0%';
liveElement.style.max-width = '0%';
</script>
I haven't gotten as far as trying to change the video back after 10 minutes as my attempts at hiding the video to start with didn't work, any help would be appreciated.
Please also let me know if this is the completely wrong way of trying to do something like this.
Have you tried doing it with jquery like this:
`$("#youtubeplay").removeAttr("hidden");
setTimeout(function(){
$("#youtubeplay").prop("hidden", "true");
},600000)`
The code is deleting attribute hidden from the element with the id "youtubeplay" and after 10 minutes (60'0000 milliseconds) adds it back so the video disappears, I hope you know jQuery but if you don't here's a code in regular JavaScript:
document.getElementById("youtubeplay").removeAttribute("hidden");
setTimeout(function(){
document.getElementById("youtubeplay").setAttribute("hidden", "true");
},600000)
I want to have a responsive youtube video on my website. I need it to look good on desktop and mobile.
this is the code I try:
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<!--Gallery section-->
<section id="songs" class="gallery main brd-bottom">
<div class="container">
<h1>נזילה בגוף - מוראס (אודיו)</h1>
<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/krhum9lNoXw"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<h1 class="large list-inline-item">
<a href="https://www.youtube.com/watch?v=krhum9lNoXw"
class="hover-effect"><i class="icon-youtube"></i> </a>
</h1>
<h1 class="large list-inline-item">
<a href="https://open.spotify.com/artist/3YX6pjxMfcQ1r2yPJaxpBi"
class="hover-effect"><i class="icon-spotify"></i> </a>
</h1>
</div>
<!--End song-->
</div>
<!-- End container -->
</section>
<!--End gallery section-->
This is how it's currently looking at my website:
I'm new to CSS and HTML so if I forgot to upload anything, let me know and I'll add it.
to see the website I'm working on you can check: http://nhrnhr0.pythonanywhere.com/
Thank you!
From the docs: you should use the player setSize method
If you want this to be done when you resize your page, use the window.resize event (as described in MDN)
In short:
window.onresize = function() {
// make sure the player variable is global or visible in current scope in your code
player.setSize(window.innerWidth, window.innerHeight);
}
I want to hide an element inside an <object> tag , the element is <div class="footer">...</div> I tried this code but still not working, please help me
<div>
<object id="t" type="text/html" data="https://www.example.com/" width="100%" height="600px" style="overflow:auto;">
</object>
</div>
and this is my javascript code
<script>
$(document).ready(function(){
var t = document.querySelector("#t");
var htmlDocument = t.contentDocument;
htmlDocument.getElementsByClassName("footer")[0].style.visibility='hidden';
});
</script>
Thank you I fixed it (hide the footer of example.com inside my website) by using an iframe and css following this code :
<div style="overflow:hidden;">
<iframe src="https://www.example.com/" name="iframe_all" frameborder="0" style="width: 100%; height: 650px; margin-bottom: -120px;" ></iframe>
</div>
So what I'm trying to do is have fullscreen video across my website. But I would like to auto play a youtube video and automatically in fullscreen (The size of the browser window). My site navigation is left and right arrows that slide from page to page. Then up and down arrows that scroll up and down each page.
But the only thing I'm trying to get done is autoplay a youtube video in fullscreen, again, the size of the browser window. Or am I going to have to host the video myself? Which may be easier, but will take up bandwidth that I'll have to pay for. Anyway thank you in advance for your help, cheers!
This was pretty well answered over here: How to make a YouTube embedded video a full page width one?
If you add '?rel=0&autoplay=1' to the end of the url in the embed code (like this)
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
of the video it should play on load. Here's a demo over at jsfiddle.
I found 2 solutions ✌ for embedding YouTube video in HTML
Only HTML No JS
in this solution we set players option in iframe parameter
body {
overflow-x: hidden;
}
.video-container {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
iframe {
position: absolute;
top: -10%;
width: 100vw;
height: 117vh;
pointer-events: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Youtube Html</title>
</head>
<body>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/rUWxSEwctFU?mute=1&modestbranding=0&autoplay=1&autohide=1&rel=0&showinfo=0&controls=0&disablekb=1&enablejsapi=1&iv_load_policy=3&loop=1&playsinline=1&fs=0&playlist=rUWxSEwctFU"></iframe>
</div>
</body>
</html>
With JS (prefer this) 💯
See codepen
Chrome Doesn't Support Automatic Fullscreen But You Can Play A Video As Simple As This:
<iframe width="640" height="360" src="youryoutubeurlhere" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
This will help to autoplay the video onload and will make it full screen but the video running will have to be muted due to the Chrome Autoplay Policy.
// https://jsfiddle.net/jlam55555/o5njka95/6/
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
// FullScreen function
function makeFullScreen() {
document.getElementsByTagName("iframe")[0].className = "fullScreen";
var elem = document.body;
requestFullScreen(elem);
}
iframe.fullScreen {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<body onload="makeFullScreen()">
<iframe src="https://www.youtube.com/embed/668nUCeBHyY?autoplay=1&mute=1&controls=0&rel=0" frameborder="0" allow="autoplay; picture-in-picture" title="YouTube Embed"></iframe>
</body>
before clicking this anchor tag I would like to do something else:
anchorref.onlick= function()
{
//do something
//progress to goal.com
return (true);
}
my html looks (something) like this, the point is having an anchor tag witin a button that you would like to do something else first before heading of to the goal.com. The Iframe is pointing to another domain. Or should I maybe create an event handler on the Iframe tag?:
<iframe class="myclass" frameborder="0" scrolling="no" allowtransparency="true" src="http://www.goal.com"
style="width: 55px; height: 20px;">
<html lang="en">
<head>
<body class="ncount">
<span id="tweet-button" class="tb-container"><span class="tb"><a id="btn" tabindex="1"
href="http://www.goal.com"</span>
<img src="someimagesrc" alt="" style="height: 1px; width: 1px;">
</body>
</html>
</iframe>
The HTML tag is not valid inside the IFRAME tag. Place your anchor outside the IFRAME and attach your event to the anchor.
Here I bind the event in the HTML:
<html>
<head>
<script type="text/javascript">
function SetIFrameURL() {
alert('Do something here!?');
document.getElementById("iframe1").src = "http://www.goal.com";
}
</script>
</head>
<body>
HIT ME!<br />
<iframe id="iframe1" class="myclass" frameborder="0" scrolling="no" allowtransparency="true"
style="width: 550px; height: 200px;">
</iframe>
</body>
</html>