does anyone know how to make a button in HTML load another HTML page inside of an iframe?
I don't understand online tutorials for this, and here's what I tried :
<div class="flex-container"> <!-- la sidebar et le iframe seront dedans -->
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Function1">Thés</button>
<button>Tisanes</button>
<button>Théières</button>
</div>
<!--FUNCTION1-->
<script>
function Function1() {
document.getElementById(src="accueil.html").innerHTML = src="Thés.html" TARGET="iframe";
}
</script>
<iframe src="accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px; id="iframe">
</iframe>
</div>
</body>
</html>
Is this even how it's supposed to be done? Cause nothing is happening when the button Thés is clicked.
I'm quite new and I'm bad with javascript. Thanks if anyone has the patience to explain this to me.
<div class="sidebar">
<button style="margin-top: 100px;" onclick="Function1()">Thés</button>
<button>Tisanes</button>
<button>Théières</button>
</div>
<iframe src="./accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px;" id="iframe">
</iframe>
<!--FUNCTION1-->
<script>
function Function1() {
const iFrame = document.getElementById('iframe');
iFrame.src = "Thes.html";
console.log(iFrame)
}
</script>
Related
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 have a website where I embed a YouTube video in an iframe. My problem is that I don't want the user to get the videoID or the link to the video (atleast without opening the console because that's propably impossible).
I already managed to disable the YouTube logo on which one can click at to open the video in a new tab. But there is the context menu if you rightclick on the video where one can copy the video url to his clipboard and so on.
After a lot of research if found out that there is no possibility to disable the context menu somehow because that would be cross-site-scripting.
Another possible method would be to constantly check the users clipboard if there is some string in it containing the videoID. This won't work aswell (except in IE i guess) because there are some restrictions to access the clipboard so i can't find out what the user saves in it (even with flash).
It would also be enough to just check if the clipboard content changed to detect that the user maybe tried to get the videoURL (it's no problem if he finds out the video url as long as I know about it).
Disabling the clipboard at all or spamming it with something else seems impossible too.
I hope there is a solution to my problem, thanks.
Edit:
this is the used HTML including some scripts (aswell as some that are not working)
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log("READY");
event.target.playVideo();
}
function onPlayerStateChange() {
console.log("STATE CHANGED");
}
</script>
<body>
<div class="all">
<?php
include "parts/header.php";
?>
<div class="player-bg">
<div class="player">
<iframe
id="player"
width="640"
height="390"
frameborder="0"
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation"
src="<?=$embedURL?>">
</iframe>
</div>
</div>
<div class="usercontrols-container">
<form id="form" method="post" action="./views.php" autocomplete="off">
<input class="textfield" type="text" min="0" name="guessViews"/>
<a class="button" href="#" onclick="document.getElementById('form').submit();">Guess</a>
</form>
</div>
</div>
</body>
<script>
function copy() {
console.log("copy detected 2");
}
document.addEventListener("copy", function() {
console.log("copy detected 1");
});
</script>
Blakk
You can add event listeners for the copy, and cut events.
You can't copy any text.
<br/>
<textarea>You can't copy any text.</textarea>
<script>
document.body.addEventListener("copy", function(e){
e.preventDefault();
e.stopPropagation();
});
document.body.addEventListener("cut", function(e){
e.preventDefault();
e.stopPropagation();
});
</script>
You could also put the video inside a tag without controls and add the controls via buttons.
<video width="320" height="240" id="vid">
<source src="https://www.w3schools.com/htmL/movie.mp4" type="video/mp4">
</video>
<button onClick="document.getElementById('vid').play()">Play</button>
<br/>
<button onClick="document.getElementById('vid').pause()">Pause</button>
You can also cover the iframe with a div overlay and prevent the contextmenu event.
#frame{
position: absolute;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
}
#overlay{
position: fixed;
top: 10px;
left: 10px;
width: 155px;
height: 155px;
background-color: transparent;
z-index: 1000;
}
<iframe width="150" height="150" id="frame">
</iframe>
<div id="overlay"></div>
<script>
document.getElementById("overlay").addEventListener("contextmenu", function(event){
event.preventDefault();
event.stopPropagation();
});
</script>
Tip: You can add an overlay to the iframe this will prevent also right click. But you need a way to satrt and stop the video with an API.
Example:
<div class="player-bg">
<div class="player">
<div id="overlay" style="
width: 560px;
height: 315px;
background: transparent;
position: absolute;
"></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/raa5ki4hVp8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>
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>
There is a blank image (blank.png) with background hover effect, which works. I click on the image and it hides, then the video div shows, which works. What I can't figure out is how to get the video to play on the click on original blank image.
I have it working most of the way, but can't get the video to play on click of the image.
I am not the best with scripting.
An example of what I have done:
http://jsfiddle.net/3s8EC/2/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
});
});
});
</script>
<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}
#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg) no-repeat;
}
</style>
<div style="width: 100%; height: 370px; background-color: #000;">
<div id="promovid">
<div class="custom-th">
<img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />
</div>
<div id="thevideo" style="display:none; padding: 0px;">
<center>
<video onclick="this.play();" preload="auto" width="600" height="370">
<source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
</video>
</center>
</div>
</div>
</div>
Any help is appreciated, but since I am not the best with scripting an actual example, or edit the jsfiddle, would be totally super awesome.
Thanks in advance for the help.
Just add a $("video").click();
Like this:
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
$("video").click();
});
});
});
Add an id to the video if you have multiple videos on the page and use it's id instead of "video" in the selector.
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>