I am trying to get a link from an iframe, when it changes. I have iframe of one site, on different domain. I am trying to get a second link, when iframe redirected to a different page.
For example, default iframe on site hosts a form. After form is completed, it redirects to another page and then src in iframe changes. I am not able to get a link from iframe, not even sure if that is possible.
I was googling, but whatever I tried doesnt work for me.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe id="iframe" samesite=None width="100%" height="100%" frameborder="0"
src="www.site.com/" />
</div>
<script>
$(document).ready(function(){
console.log('asdsadsa');
var link = document.getElementById("iframe").src;
console.log(link);
});
</script>
</body>
</html>
Not sure if this is possible, any advice is appreciated.
Related
I was creating a website based on a video as a background for the homepage I came across a problem, I don't know what the problem is but I followed an online tutorial and it seems that the video that I was willing to put in my website has shown up but does not play and is way too big even when viewed at full screen.
here's the code:
<html>
<head>
<!-- settings -->
<title> Prestige</title>
<link rel="shortcut icon" type="image/png" href="images/favicon.png"
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" conetent="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="Intro.mp4" autoplay="true" loop="true"></video>
</div>
</header>
</body>
If you mean the video is too big for your page->
You can resize the video by using width and height attribute.
for example:
<video src="Sample.mp4" width="320" height="240">
If you mean the video is too big in terms of memory->
try to compress the video or embed using embed tag. You can also try to update to the latest version of your browser.
You can try to upload your code in a code snippet to replicate it and see if there's a problem with your code.
You can try this code:
HTML
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/* Add some content at the bottom of the video/page */
.content {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 20px;
}
/* Style the button used to pause/play the video */
#myBtn {
width: 200px;
font-size: 18px;
padding: 10px;
border: none;
background: #000;
color: #fff;
cursor: pointer;
}
#myBtn:hover {
background: #ddd;
color: black;
}
JS
<script>
// Get the video
var video = document.getElementById("myVideo");
// Get the button
var btn = document.getElementById("myBtn");
// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>
Also you can check this here.
I have my video-js player in a percentage width container, and it's finally resizing beautifully. However the controls are placed at the top of the video instead of the bottom, and the pause button will not work. Slider, volume, and fullscreen all work, but not pause. I've tried both 4.2 and 4.2.1 with no luck. If I use the version hosted here: "http://vjs.zencdn.net/c/video-js.css" the pause works, but the controls are still placed at the top.
I've tested this in both firefox and chrome with no luck.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="http://vjs.zencdn.net/4.2.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.2.1/video.js"></script>
<script src="vidjs/z-skin.css" rel="stylesheet"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type="text/css">
.BCLvideoWrapper {
position: relative;
padding-top: 0px;
padding-bottom: 56.25%;
height: 0;
}
* html .BCLvideoWrapper {
margin-bottom: 45px;
margin-top: 0;
width: 100%;
height: 100%;
}
.BCLvideoWrapper div,
.BCLvideoWrapper embed,
.BCLvideoWrapper object,
.BrightcoveExperience {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="indexvid">
<div class="BCLvideoWrapper">
<video id="QuickReel" class="video-js vjs-default-skin"
controls preload="auto" width="100%" height="auto" poster="images/reelthumbnail.jpg"
data-setup="{}">
<source src="media/reel.mp4" type='video/mp4' />
<source src="media/reel.webm" type='video/webm' />
</video>
</div><!--BCL--></div><!--indexvid-->
</body>
</html>
.BCLvideoWrapper div selects all divs that are descendants of .BCLvideoWrapper. As the video.js player consists of many divs (take a look in your browser's dev tools) this style has the unintended consequences you're seeing.
You should use .BCLvideoWrapper > div instead to match only divs that are (immediate) children of .BCLvideoWrapper, i.e. the div that video.js inserts in place of the original <video> element. The divs within that div won't match the rule.
.BCLvideoWrapper > div {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
Alternatively you could use .BCLvideoWrapper > .video-js to match just children with the .video-js class -- this would also match the unmodified <video> element in the event that javascript is disabled.
See this question for an expiation of the difference between child and descendant selectors
I have 2 iframes one on top of each other.
each iframe loads a different page.
iframe 1 is the header
iframe 2 is the content
desire
behave as one page, so when you scroll the entire page scrolls
issue
only the bottom one scrolls
Is there a way to do this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled</title>
<style type="text/css">
body, html
{
margin: 0; padding: 0;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90); overflow:hidden;
}
</style>
</head>
<body>
<iframe src="http://www.example.com" width="100%" height="100" frameborder="0" scrolling="no"></iframe><br />
<div id="content">
<iframe src="http://www.cnn.com" width="100%" height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
If PHP is an option for you, you can use the include() function to import the page header and body content from other files. This will construct the two pages into one and will scroll all as one.
The one drawback to this (from what you're doing already) is that whenever a hyperlink is followed from the page body, the header reloads on the next page.
(versus the header being static and not refreshing every time and new page is navigated to)
<?php
// Page Header
include("headerfile.html");
// Page Body
include("bodyfile.html");
?>
Likewise, you could just put the content for the body on that file.
<?php
// Page Header
include("headerfile.html");
?>
<!--content html goes here-->
I am trying to embed a URL in my webpage using iframe. The page is working properly on FireFox and Chrome, but on IE a vertical space is left after the scroll bar, how do I remove it ?
Here is the code along with CSS,
<html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding 0;
}
iframe {
height: 100%;
width: 100%;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<iframe src="http://abc.org" frameborder="0" scrolling="auto" ></iframe>
</body>
</html>
Regards,
Timothy
This is you're complete solution :
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.abc.org" style="width:100%;height:100%"></iframe>
</body>
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.