I would be really, really happy if someone could help me with removing the click (link) option from this iframe. I just want the image to be not clickable.
<iframe src="http://snapwidget.com/in/?u=bW9sbGVrcnVrbWFrZXJpfGlufDI1MHwxfDF8fG5vfDB8bm9uZXxvblN0YXJ0fG5vfG5v&ve=120215" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:200px; height:200px"></iframe>
You can put a transparent div in front of the iframe.
.iframeContainer{
position:relative;
border:1px solid;
width:200px;
height:200px;
}
.iframeBlocker{
position:absolute;
width:100%;
height:100%;
background:#000;
opacity:0.5;
}
<div class="iframeContainer">
<div class="iframeBlocker"></div>
<iframe src="http://snapwidget.com/in/?u=bW9sbGVrcnVrbWFrZXJpfGlufDI1MHwxfDF8fG5vfDB8bm9uZXxvblN0YXJ0fG5vfG5v&ve=120215" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:200px; height:200px"></iframe>
</div>
Related
Anyone know how to put a tag next to the youtube videos without creating extra line space between the border box and the video vertically? Like I'm trying to put text in the right side of the first video but it keeps making extra space between the video and the border box where it says vide.
<!DOCTYPE html
<html lang="en">
<meta charset="UTF-8">
<head>
<title>007 Nightfire | Videos</title>
</head>
<style>
.div1 {
background-color:#77BFC7;
text-align:center;
font-size:50px;
border:1px solid #77BFC7;
height:70px;
font-weight:bold;
}
body {
background-color:#00AAFF;
}
hr {
height:0px;
background-color:#000000;
border:solid;
}
</style>
<body>
<div class="div1">
Videos
</div>
<center>
<iframe width="520" height="300"
src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<br>
<br>
<hr>
<iframe width="520" height="300"
src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</body>
</html>
You just need a div with inline style, and to float the text to the right. I'd also recommend to change the center tag to a div, as its not the recommended HTML5 way to center stuff.
.div1 {
background-color: #77BFC7;
text-align: center;
font-size: 50px;
border: 1px solid #77BFC7;
height: 70px;
font-weight: bold;
}
body {
background-color: #00AAFF;
}
hr {
height: 0px;
background-color: #000000;
border: solid;
}
<div class="div1">
Videos
</div>
<center>
<div style="display: inline-block;">
<iframe width="520" height="300" src="https://www.youtube.com/embed/7TVYA_o5Fsw" allowfullscreen style="position:relative; top:5px; right:360px;">
</iframe>
<p style="float: right">Text Content Here</p>
</div>
<br>
<br>
<hr>
<iframe width="520" height="300" src="https://youtube.com/embed/XZMtPu35UT8" allowfullscreen style="position:relative; top:10px; left:350px;">
</iframe>
</center>
<iframe frameborder="0" style="height: 1800px; overflow:scroll; width: 100%" src="https://merch.streamelements.com/benjuna" marginheight="1" marginwidth="1" name="cboxmain" id="cboxmain" seamless="seamless" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
If I set the height to "auto" it only shows the top banner, if I lock it to a certain amount of pixels then the page does not work on smaller screens.
Any thoughts about this?
Here, this makes it take up the entire page you still have to scrol but it fills the page :
<iframe
style="
position:absolute;
top:0px;
left:0px;
width: 100%;
height: 100%; "
frameborder="0"
src="https://merch.streamelements.com/benjuna"
marginheight="1"
marginwidth="1"
name="cboxmain"
id="cboxmain"
seamless="seamless"
frameborder="0"
allowtransparency="true">
</iframe>
I added a video as a background of my website, it works fine but when I move to mobile version i get some space on the top and the bottom of the video, why is this happening ?
<header class="v-header container">
<div class="fullscreen-video-wrap">
<video src="video.mp4" autoplay="" loop="" muted>
</video>
</div>
</header>
.v-header{
height:100vh;
display:flex;
align-items:center;
color:#fff;
}
.fullscreen-video-wrap{
position:absolute;
top:0;
left:0;
width:100%;
height:100vh;
overflow:hidden;
}
.fullscreen-video-wrap video{
min-height:100%;
min-width:100%;
max-width:100%;
}
I'm using Foundation and ".responsive-embed" video, I have a mobile menu overlay that sits on top. However I've discovered that if this defined before the video (like in the header) the properties that I would expect the z-index to place this overlay on top doesn't work.
I can't understand why, the same values applied after in the markup achieve the desired result. How can I make the red overlay sit ontop?
<div class="overlay">
</div>
<div class="grid-x grid-padding-x">
<div class="small-6 cell">
<div class="responsive-embed widescreen">
<iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="overlay--blue"></div>
.overlay {
position:absolute;
height:100vh;
width:100vw;
display:flex;
background: red;
top:0;
left:0;
}
.overlay--blue {
position:absolute;
height:50vh;
width:100vw;
display:flex;
background: blue;
top:0;
left:0;
}
Try adding some z-index to your .overlay.
https://codepen.io/DanielRuf/pen/VgWaom
I am having some trouble with this for some reason... I've been using old school html frames forever and decided I should start using iframes for easier javascript integration... I need a top nav and a left nav with content filling the rest of the page... Tell me what I'm doing wrong!!
Original:
<html>
<head>
<title></title>
</head>
<iframe style="display:block; width:100%; height:50px"
src="navTop.html" name="iframeTop" scrolling="no" frameBorder="0">
</iframe>
<iframe style="display:inline; overflow:hidden; width=10%; height=100%;"
src="navLeft.html" name="iframeLeft" scrolling="no" frameBorder="0">
</iframe>
<iframe style="display:block; float:right; width=90%; height=100%"
src="content.html" name="iframeCenter" scrolling="auto" frameBorder="0">
</iframe>
<noframes></noframes>
</html>
I am sure its something really simple that I am missing. Thanks in advance!
Edit:
I started trying to accomplish this with div's and css... This is where I am... It's not working still... Help!!!
CSS:
<style>
body {
margin:0px;
padding:0px;
}
#topNavigation div {
background-color:100719;
margin:0px;
padding:0px;
margin-top:0px;
margin-left:0px;
width:100%;
height:50px;
}
#leftNavigation div {
background-color:100719;
margin:0px;
padding:0px;
margin-top:50px;
margin-left:0px;
width:400px;
height:100%;
}
#displayContent div {
background-color:100719;
margin:0px;
padding:0px;
margin-top:50px;
margin-left:400px;
width:100%;
height:100%;
}
</style>
DIVS:
<body>
<div id="topNavigation">
<iframe src="navTop.html"
style="border:0px #FFFFFF none;"
name="navTop"
scrolling="no"
frameborder="0"
marginheight="0px"
marginwidth="0px">
</iframe>
</div>
<div id="leftNavigation">
<iframe src="navLeft.html"
style="border:0px #FFFFFF none;"
name="navLeft"
scrolling="no"
frameborder="0"
marginheight="0px"
marginwidth="0px">
</iframe>
</div>
<div id="displayContent">
<iframe src="content.html"
style="border:0px #FFFFFF none;"
name="content"
scrolling="no"
frameborder="0"
marginheight="0px"
marginwidth="0px">
</iframe>
</div>
</body>
Resolved:
<body style="margin:0px; padding:0px; line-height:0; height:100%">
<iframe src="navTop.html"
style="margin:0px; padding:0px; line-height:0; width:100%; height:8%;"
name="navTop" scrolling="no" frameborder="0">
</iframe>
<iframe src="navLeft.html"
style="margin:0px; padding:0px; line-height:0; width:10%; height:100%; float:left"
name="navLeft" scrolling="no" frameborder="0">
</iframe>
<iframe src="content.html"
style="margin:0px; padding:0px; line-height:0; width:90%; height:100%; float:right"
name="content" scrolling="no" frameborder="0">
</iframe>