I need to add a Youtube video to a webpage, however, just working the "play" and "pause"... Without giving the visiting the option to see the progress bar or even click on the channel photo... Just play and pause...
The most you can do is this code without success:
<div class="elementor-element elementor-element-50400e2 elementor-widget elementor-widget-html" data-id="50400e2" data-element_type="widget" data-widget_type="html.default">
<div class="elementor-widget-container">
<div style="position: relative; height: 0; padding-bottom: 56.2%; padding-top: 0;">
<iframe style="position: absolute !important; width: 100% !important; height: 100% !important; z-index: 100" src="https://www.youtube.com/embed/EErSKhC0CZs?enablejsapi=0&autoplay=0&modestbranding=1&controls=0&showinfo=0&rel=0&hd=1&wmode=transparent&enablejsapi=0" frameborder="0" allowfullscreen=""></iframe>
<div style="position: absolute;top: 0;width: 100%;height: 70px;background-color: transparent;z-index: 101;left: 0;"></div>
<div style="position: absolute;bottom: 0;width: 100%;height: 50px;background-color: transparent;z-index: 101;left: 0;"></div>
Exactly how this page is doing: https://www.tedswoodworking.com/new/vsl/
Related
I would like to have the iframe on bottom, canvas in the middle and some div on top.
This is what I have:
<canvas id="drawLineCanvas" style="position: absolute; z-index: 0; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
However, currently the canvas in on top of both iframe and commentDiv div.
I made some changes:
<canvas id="drawLineCanvas" style="position: absolute; z-index: -1; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" style="z-index: -2;" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
However, now while div is on top of canvas, the iframe is also on top of canvas.
Any tips on on how to solve this?
Here is the layout you want. Try this.
<div name="commentDiv" id="commentDiv" style=" z-index: 1;">this is div</div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;display:block"></canvas>
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Using position:absolute I can get what I want to happen.
<canvas id="drawLineCanvas" style="position: absolute; z-index: 0; display: inline;" width="1450" height="1600"></canvas>
<div id="mainwork">
<iframe name="inlineCommentingFrame" id="inlineCommentingFrame" scrolling="no" class="imageFrame" style="position: absolute; z-index: -1;" src="index1.jpg" frameborder="0"></iframe>
<div name="commentDiv" id="commentDiv" style="margin-left:70%; z-index: 1;"></div>
</div>
Scroll is not working on my iframe when I access my website from mobile device browser. It works perfectly fine on my laptop.
Here is my html:
<div style="align: center; position:relative;">
<div class="modal-header" style="background-color: transparent;position:absolute;top:0;right: 0;border: 0px;">
<button type="button" class="close" ng-click="cancel()">
<span aria-hidden="true" style="color:#868686;">×</span>
<span class="sr-only">Close</span>
</button>
<!--<h3 class="modal-title">Acquire Documents</h3>-->
</div>
<iframe id="vault" ng-src="{{iframeUrl}}" style="z-index: 1000; -webkit-overflow-scrolling: touch !important; width: 100%; overflow: scroll; height: 700px; padding-right: 15px" target="_parent" scrolling="yes" frameBorder="0" ></iframe>
<shoebox-loader backdrop="true" loading="showLoading"></shoebox-loader>
I tried what is suggested in iFrame scrolling not working on iOS devices but that didn't help.
I also tried setting the position: absolute for the iframe but that didn't help either.
Can someone help me with whats going wrong?
My code works fine in Chrome, however when I run it in Firefox, there is a problem. My webpage has 2 roman style columns ( each column consists of 2 images, a top and a bottom )that run vertically from the bottom of the header to the top of the footer. But in Firefox they stop about 30px from the top of the footer, leaving a gap.
My code does not include any vender prefixer's, but when I ran my CSS through Autoprefixer.com it did not add any either. Here is the code that seems to be affected.
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="685" width="60">
</div>
<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="685" width="60">
</div>
/*Roman Columns*/
#col_topleft {position: absolute;
top: 220px;
left: 25px;
}
#col_topright {position: absolute;
top: 220px;
right: 25px;
}
#col_bottleft {position: absolute;
top: 640px;
left: 25px;
}
#col_bottright {position: absolute;
top: 640px;
right: 25px;
}
This should fix the problem.
First add a div with position:relative than drop your content inside that div
<div style="position:relative;">
<div style="position:absolute"> <!-- your content div -->
</div>
</div>
I'm trying to create a div that shows a scrollbar only when the elements don't fit within the default area.
<div style="overflow-y: auto; height: 36px;">
<img src="." width="36" height="36" />
</div>
Unfortunately there is some padding on the bottom of the div, so the scrollbar is always shown even though in theory the img and the div should be the same height. I'm able to reproduce in Firefox and Chrome, so it doesn't seem like a browser bug.
Why is this happening?
Try to add font-size: 0; to parent div:
<div style="overflow-y: auto; height: 36px; font-size: 0;">
<img src="." width="36" height="36" />
</div>
Try to get rid of padding in a parent div, or the page all together.
<html>
<body style="margin: 0; padding: 0;">
<div style="overflow-y: auto; height: 36px; margin: 0; padding: 0;">
<img src="." width="36" height="36" style="margin: 0; padding: 0;"/>
</div>
</body>
</html>
You just need to set float on <img>
<div style="overflow-y: auto; height: 36px;">
<img src="." width="36" height="36" style="float:left"/>
</div>
I have tried many times get I cannot get it, I am trying to put a div on top of Iframe content
<div align="middle">
<div style="position: relative;">
<iframe
src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg"
width="1000" height="670" scrolling="no">
</div>
<div style="position: absolute; left: 50px;">
<p>hi</p>
</div>
The green picture is just for example. I just have a file hosted on one server that shows a slideshow and I want to be able to put a couple of links on top of it
Try having the iframe and the div to place on top positioned absolute, and both inside an relative positioned container. A quick edit to your code:
<div style="position: relative;">
<iframe style="position: absolute;" src="http://www.theprintblog.com/wp-content/uploads/2013/03/green.jpg" width="1000" height="670" scrolling="no"></iframe>
<div style="position: absolute; left: 50px;">
<p>hi</p>
</div>
</div>
And a demo on jsfiddle:
http://jsfiddle.net/Zk3Hq/