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?
Related
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/
I have the specification load load a modal window with a video using amp-html.
We are trying to achieve this using amp-lightbox with a amp-video inside the modal window. However, the video is not responding to the size of the modal window (I assume this is down to the initial display:none on the lightbox when the page is loaded).
I have the following amp-html;
<a class="travel-results-result-link block relative" on="tap:video-1">
<amp-img class="block rounded" width="346" height="200" noloading="" src="/images/video/image01.jpg"></amp-img>
</a>
//...
<amp-lightbox id="video-1" layout="nodisplay">
<div class="lightbox"
on="tap:video-1.close"
role="button"
tabindex="0">
<div class="modal-body">
<amp-video controls
width="320" height="240"
layout="responsive"
poster="images/video/image01.jpg">
<source src="videos/gail-video-1.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</div>
</div>
</amp-lightbox>
The css for my modal body is simply;
.modal-body {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
margin-top: 75px;
height: calc(100% - 200px);
}
When I click to load the modal both the preload image and video are loading outside the boundaries of the modal-body div? can anyone suggest a way around this?
I have the following html code.
<div class="panel" style="background-color: #e6e6e6">
<div class="col-sm-9">
<video id="currentVideo" src="{{currentVideo.Source}}" width="100%" height="auto" controls style="margin: 5px">
Your browser does not support the video tag.
</video>
</div>
<div class="col-sm-3" style="overflow-y: scroll;">
<div ng-repeat="video in videoHelpFiles" style="margin: 5px">
<button class="btn btn-primary" ng-click="showVideo(video)" style="width: 100%; white-space: normal; padding: 5%">
<h4 style="text-align:center; margin: 4px 0px;"> {{video.Title}} </h4>
</button>
</div>
</div>
</div>
There's some styling in here too which I want to eventually move but leaving here until I get it how I want it. Basically all I want to do is have the col-sm-3 div be the same height as the sol-sm-9 height and would like the buttons in the col-sm-3 div to use 100% height of the div they're in. I've tried using height='100%' and a few things like that with no luck. Any help would be greatly appreciated.
I have the code below which i am using from google docs to display a presentation, i would like to know is there any method of me hide the bar at the bottom so that it does not show up.
<div style="width: 960; height: 540;
background-color:White;">
<div style="z-index: -2;"><iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000" frameborder="0" width="960" height="569"></iframe></div>
</div>
set parent div height less the iframe height and use overflow: hidden; in parent div.
Try this code
<div style="width: 960px; height: 540px;background-color:White; overflow: hidden;">
<iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000" frameborder="0" width="960" height="569"></iframe>
</div>
DEMO
try adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/1FYhFR3a49gvmyqozJbtNe3eP7FogKJRwGE9bN7tihSs/embed?start=true&loop=false&delayms=3000&rm=minimal" frameborder="0" width="960" height="569"></iframe>
I am designing a site that has a semi-transparent container for the content, which is divided into two columns. My CSS:
#content {
width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}
#sidebox {
width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right;
background-color: #FFF}
#main {
width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}
The HTML for embedding the video:
<div id="content">
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I put some static stuff in the sidebox and then make news posts to the main div. If I embed a video in an iframe in main, then the semi-opaque background from content (as well as the drop-shadow) doesn't render. I found a lot of solutions geared towards what to do if you want to overlay a div on an iframe, but nothing about putting an iframe in a div container screwing up the styling of that container.
The website, which currently has the video embedded: http://physics.nyu.edu/~dzb212/music_index.html
I'm not 100% sure of the reasoning behind it, but if you add display:inline-block to your content style it seems to work on my end
Try this...
html content :
<div id="content">
<p> content div </p>
<div id="sidebox">...</div>
<div id="main">
<div class="post">
<p> main div </p>
<a name="song" />
<p class="title">New song!</p>
<p class="date">Posted January 16, 2013</p>
<center>
<iframe width="480" height="360"
src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />
</center>
</div>
</div>
</div>
I noticed some strange behaviors arising from my use of <a href="blah" /> kinds of statements in my HTML. I was under the impression that <[stuff] /> was the same as <[stuff]></[stuff]>, and that it was just a convenient shorthand for an element that contained nothing else. However, I don't know if this is true, and I found that huge chunks of text were unexpectedly being moved into <a> elements. I therefore changed
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`
to
<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%"></iframe>
and all seems to be displaying correctly. I no longer even need display: inline-block in the content styling.
Thanks for your help.