Many times I am only interested in the first portion
and would like to make a "collage", say of arriving buses at nearby stops and fit more on a small screen.
I found I can use "iframe", but having the cursor in the frame of course scrolls the frame
rather than scroll me further down the web page. Just for variety I include an image too.
Is there a better way to post "heads" of web pages? (I probably know to little about CSS and Bootstrap, etc.)
Running the snippet here shows only the traffic cam, but pasting it for example into http://htmledit.squarefree.com/ or local html file runs just fine. https://codepen.io/pen/ shows pugetsound "refuses to connect".
<div class="thumbnail-container">
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_14961" frameborder="0"></iframe>
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_15540" frameborder="0"></iframe>
<img src="http://www.seattle.gov/trafficcams/images/WSB_Midspan_EW.jpg" width="400" /> <!-- or a placekitten.com ;-) -->
<iframe height="260px" width="322px" src="http://pugetsound.onebusaway.org/where/iphone/stop.action?id=1_19930" frameborder="0"></iframe>
</div>
Just to show that there are other example applications I run into frequently
would be the weather for the next 2 days only, or the temperature for the last few days.
An answer to above would solve many problems.
height=380px http://forecast.weather.gov/MapClick.php?lat=47.578&lon=-122.403&FcstType=text&TextType=2
height 120px https://atmos.washington.edu/~neal/uwp/index72.cgi
If the issue is you do not want the iFrame to scroll, you can try:
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
Related
What I am trying to do is embed a website into mine. When you search something on their page their embed site redirects through their pages though it will still be on my web page. Any help will be appreciated. I have partnered up with this site and they don't know how to do it themselves.
I am sorry if this is confusing. Here is a example if it helps
<html>//my site
<header>//my site
</header>//my site
<body>//my site
//where embed website is with their page redirects and search engine
</body>//my site
</html>//my site
When you search on their site or go to their pages link on their site. This should be like this in way.
<html>//my site
<header>//my site
</header>//my site
<body>//my site
//new page on the embed site after redirect
</body>//my site
</html>//my site
Any thoughts or places I can go help me figure this out.
You can embed websites into another website using the <embed> tag, like so:
<embed src="http://www.example.com" style="width:500px; height: 300px;">
You can change the height, width, and URL to suit your needs.
The <embed> tag is the most up-to-date way to embed websites, as it was introduced with HTML5.
Put content from other site in iframe
<iframe src="/othersiteurl" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
You might want to check HTML frames, which can do pretty much exactly what you are looking for. They are considered outdated however.
**What's the best way to avoid a fixed size, i.e., to have the embedded website scale responsively to the browser's window size? I'd like to avoid scroll bars within my website. – CGFoX Feb 2 '19 at 15:52
**Is it possible to set width and height to percentages instead of absolute pixels? – CGFoX Mar 16 at 11:53
ANSWER: <embed src="https://YOURDOMAIN.com/PAGE.HTM" style="width:100%; height: 50vw;">
We have a page that has a video on it, embedded with an iframe.
The iframe js code for the player has the following code in it:
m.default.focus(function (e) {
var t = e.playButton;
(0, y.focusElement) (t)
})
This basically makes the play button visible on the screen if it isn't already. Which is fine for stand alone videos, but not on a page where we have the video embedded.
What it does framed in on our page is cause the entire page to scroll to that content.
We'd like to prevent that if possible.
Here is the iframe code:
<div class="embed-responsive mb-5 embed-responsive-16by9" id="myFrame" style="height: auto;">
<iframe allowfullscreen="" class="embed-responsive-item" sandbox="allow-scripts allow-downloads-without-user-activation allow-same-origin" src="https://sourcefile.onthesamedomain.com" title="Video"></iframe>
</div>
We've tried the scroll to 0,0 on the parent but that didn't work.
Apologies, but I forgot to add that this is only an issue in Firefox. The other browsers work with the attributes on the iframe.
Any help would be appreciated.
The 3rd party owner of the js within the iframe ended up providing a fix. There was no way we could do this without the screen scrolling back and forth.
I'm trying to troubleshoot a strange bug on one of our pages (https://www.bbg.org/visit/sakura_matsuri_photos).
The bottom of left of the page has the text 'cp_vimeo_code.js Open' and I can't figure out what is generating this.
here is what it looks like
I've noticed that there are other websites that show this error too, for example: https://www.indicia.nl/project/anderson-macgyver/.
I have the following three embeds inside the body tag of a webpage in Expression Engine. Taking them out eliminates the error.
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978232?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/210978156?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
<div class="videoWrapper">
<iframe src="https://player.vimeo.com/video/160249045?title=0&byline=0&portrait=0" width="540" height="304" frameborder="0"></iframe>
</div>
Has anyone seen something like this before? I can't find it on Vimeo's site anywhere.
Here is a picture of the error on our page
It looks like this is a call from an addon, that's trying to load a .js file for use in the control panel. However, since you're not in the CP it'll show the call as text.
Maybe see if the addon needs updating, or, since there are a lot of video player addons that have been abbandoned, need replacing
More indepth answers can be found on EE's own Stack: https://expressionengine.stackexchange.com/
I finally figured where this was coming from, it was some extra code in a Google Tag Manger custom tag!!
I have a rather strange issue with my jPlayer. I have been using this player for about 2 years now, and it's worked great iframed from my server into a web page elsewhere. Recently I did move the players from GoDaddyto my hosted WHM server. I at least thought they worked properly after but now when you open a page with it the music names n title scrolls fine but no music.
But if you hit the pop out box upper right, a new pop out box appears, and it plays fine and no longer had the little square for the pop out. As an experiment I copied the pop out link back into the iframe and ended up the pop out link box wasn't there and still no music. I tried re-copying the entire player directory again from GoDaddy and had the same experience. Was there maybe a change with Chrome and iframe security?
If I put the link in the original iframe directly into the address bar in Chrome it works fine, as does the url that accompanies the pop out.
I'm a baby at best when it comes to this but often I don't hear from my developer for some time and I am trying to learn.
<IFRAME src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0"></iframe>
I can get to the various codes but this is the start. There are many players back ended into the same player vix XML file but none of that has changed. This also works fine in IE and Firefox.
It doesn't function in the Snippet because of strict security but it works in this `PLUNKER. I'm not sure what you are asking...
<iframe src="http://players3.djextreme.net/global/index.php?stream=8004" width="375" scrolling="no" height="350" frameborder="0" allowfullscreen></iframe>
I have a simple iframe which is used to display a vimeo video on my site, as so:
<div class="video">
<iframe src="//player.vimeo.com/video/88893424" width="960px" height="540px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And it works like a charm on all standard computer browsers. Ajax is used throughout the site, and transitioning between pages that have videos and don't work exactly as you would expect - Ajax grabs the new page content, slides it on, deletes the old content, and the video works perfectly.
However, on iOS Safari, the video does NOT load. The space for the video is reserved - the other content on the page flows around the area where the video should be, which tells me the div is loading, and the height and width information of the iframe element is being registered by the browser. But no video, nothing. Reload the new page, though, and the video is there and plays just fine.
So my question is: Why is the reload required? What could I be doing wrong that is causing the AJAX to fail? I have read several answers across SO that seem to incriminate header information and cross-site drama, but it is danced around and not explained. Can anyone give me a clear understanding of what's going on here?