Home Page List/Directory   Facebook Blog    Queries? Email to:   Webmaster


Monday, November 11, 2013

IFRAME and OBJECT page-redirects! - Quick Fix.htm

By GP duBerger

courtesy of wpclipart.com - free clip art
Annoying page-redirects is a new "feature" because of badly written Java and JavaScript in embedded elements, and this problem does not seem to be going away either. This is Google's fault and no one is doing anything about this so we have to do like Wile E. Coyote, in his way of fixing this. The best way is through Equivalence where we use the same thing to destroy itself and stop interfering with webpages. Because this is caused by the embedded element itself which can be an IFRAME or an OBJECT element through irresponsibly written Java, JavaScript and HTML 5, used to make and render the video.

For this we will use some simple HTML Markup and some kindergarten JavaScript that's ancient and completely harmless, but it must be handled carefully or it won't work (instead of causing harm).

Below is an example I ran into, where when, at one point, while editing this page that was further below and pressing the "Refresh" button to see the results, it always shot up, higher up the page instead. This is caused by the OBJECT Element creating the video (seen below) and is even more pronounced with IFRAME's of embedded videos from your Google Drive Storage, and other such places, that you Uploaded there for view on your site since the page-redirects occur in both directions with them and always open where the video is anywhere on the page, where you need to scroll to the top if you're going there for the first time. Not a good thing!

Anyway there is much to watch out for in the future because now this stuff is creeping into IMG tags as will be explained here in a runabout way because these instructions are embedded inside the embedded object but is handled differently with IMG elements, where in both cases it is the server that tells the browser to behave in such a manner from this external source and with images the instructions are in the markup and are not embedded like in OBJECT or IFRAME elements and I assume the same with HTML 5 VIDEO and EMBED elements too.

Simplicity is the key and migrating disruptive objects to another place (another site) but making them appear as if they were on the screen but ANCHOR them instead and creating professional-looking popups for them, is probably the only way to go and it does no harm to mobile app users either and actually improves their experience because the object is treated separately where on the other hand places like google try to control too many things with their army of servers that end up disrupting web pages.

Google has probably reached its saturation point, as indicated by this kind of behaviour from within and without and you must consider, now, that your mobile app, that may be acting funny, is probably not the Apps's, OS's or mobile device's fault in any way and webmasters, who are now blameless, will share some of the blame on their websites if they don't start treating embedded object differently and place them elsewhere because of their bad behaviour which is getting more pronounced not to mention making spying by Adsense and other such things useless or more difficult for them, since they are probably getting the information they are seeking wrong in the first place. In the end everyone from the multinational, the NSA to the lowly blog benefits and everyone is happy.

The videos you need to put there in a place like Google Drive or on Blogger Video, would be for copyright reasons as they won't sit comfortably on your You Tube account, or for long, and may even compromise your entire channel if you don't remove them from a usual video-host provider such as You Tube would be.

First we need to remove the offending OBJECT/IFRAME but we want to keep the Thumbnail which will now be just a picture masquerading as video. It simply just won't light up when one mouseovers it, which I personally don't care about but if this is a concern for you, there is markup, CSS and code to fix this, but this complicates things concerning this problem so this will not be explained here and is easily discovered by yourself anyway.

Click or tap on any pics to make them clearer.


We begin by pressing the PrtScr key on your key board where the derelict video is on your page, and open Paint, or whatever application you use for pictures, and paste it there. There you will crop the video, save it as a JPEG or PNG image to your desktop and this will be your new thumbnail later, representing the video as if embedded on your page.

Now we go to the home of where that video comes from around your website and open the HTML text editor (not the WYSIWYG editor). For me, I keep my videos separate on another website for HTML'S MAGIC that's semi-private where search engines are instructed not to list the site and can only be accessed, from the outside, from someone's address bar with the exact string like it was email; again for copyright reasons.
This you should do too, as you don't want problems from any iffi videos and with this you are on solid legal grounds to defend your Fair Use rights and It's difficult to impossible for DMAC robots and spiders to find them as they, as "visitors" or spys, are not supposed to be there in the first place, by you, previously, instructing your host to not list that particular website, that nevertheless is connected to your main website and only it has access to it with links you create to go there and to the particular video in question that's next to any dialogue on the page that justifies its purpose for Fair Use, and so cannot be questioned by even the most corrupt of lawyers working for things like CBS.

Now you will need some badly written markup (Which means: Not up to W3 overly-zealous and intellectual standards) but works beautifully everywhere else in the webpage universe. The badly written part is only the BR tags I use, but here I'm using the old style BR tag that was considered nothing more than "carriage return" [↵] and functions exactly as such and not the intellectualized nonsense they create and make people use today. The intellectualized nonsense happens to be that there is a difference between a line break and a space break which makes sense if you are a closed-system or Second Law of Thermodynamic thinker, but for Open-system or Zeroth Law of Thermodynamic thinkers there is no distinction. Don't worry, they all work perfectly and every browser, user agent or server still renders all the different tags in the same way without distinction (especially those tags that don't use or need Styles), and will always, because there are many documents from the past rendered that way, among other reasons too, and for me it is more convenient than the P or PRE tag that W3 recommends for spaces, not lines.

For our purposes it functions as an empty line (without content) so this is a Structure issue for a place called "nothing" which is not defined by the W3 Consortium, nor does 'Nothing' exist as a standard of measurement or unit anywhere in society but exists prominently in the Arts and in Quantum Mechanics, so it is good we use the old tag since we are not monkeying around with semantics involving syntax for a universe that is represented as nonexistence but is there anyway and has a place with the power to make things exist when it decides. This is how the Universe got started in the first place. So here we are using the Universe's standards for being and existing rather than the W3 standards for being and existing and we're applying those standards to HTML markup.

Further, here are still machines that correct HTML pages and use this tag if you want it corrected, changed or converted as a:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> or a
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> document.

Another mortal sin here is: I left out the Style attribute and value to the ID tag, which you can do yourself if you want as this is not a lesson in CSS, and it also works fine, as it is, for our purposes here to keep things as simple as possible. You, yourself, in whatever HTML philosophy you carry, can make all those changes/adjustments yourself to suit your methods. Here, I am employing "Implementation" and "Content" and you decide whatever Structure, and Styles and type of HTML Markup to use as you should be aware, or familiar, of all of them anyway, as to their advantages and disadvantages if you have a website.
These tags and JavaScript are also very basic, of which you can either leave them alone or develop them yourself to a high degree of complexity, if that is your wish. Development exists everywhere at any level of your knowledge of writing markup or code, and there is an invisible line between "learning" and "developing" in anything concerning making webpages function the way you like.


Copy this code, below, and paste it in the HTML editor where the embed code for the video is located (pic below). You should keep this type of "canned" markup, in some text document, for your own webpages as these things would take too long to write each time. Overtime, you will understand them and learn how they work and even be able to make adjustments to your liking. Always experiment with HTML! It does no harm to your computer or browser so you don't have anything to worry about.

Below is a screen shot of the HTML for the video that can be posted anywhere in any of HTML'S MAGIC's different websites that work together to create and ruin run my main pages. If your situation is different, it makes no difference as the only thing you need to seek is the EMBED, OBJECT or IFRAME code from a source, like You Tube, Google Drive, Blogger Video etc. which you would now place separately on another page or a connected site and would no longer be embedded to your main website or its pages.

In red, is a typical Blogger Video code that's causing problems and below that, in the green box, is the markup that I pasted from the box above that will, later, wrap around the OBJECT element in red.

Do what is shown below


Now we upload our thumbnail while we are here, and leave it there temporarily as part of this code will go to your main page and the rest deleted.

Now we go to our main webpage, where we have our problem. What we want to do put some JavaScript to replace the markup-code that is there with a pop-up box that will be its own movie theatre that has nothing to do with your page but will appear magically on your screen. The JavaScript only goes to the site that contains the video and will respond to the instructions of the structure elements we just placed there before, and the thumbnail will serve as its activation when we click or tap on it. The video itself will appear and nothing else and the viewer will have to turn it on by clicking or tapping on it. For all intents and purposes everything will look exactly like before but will Function differently, which is what JavaScript is for: "To provide Function to webpages".
Below is a screen shot from the HTML editor of our misbehaving video (highlighted) that's causing our problems.


We replace this markup with the following.

It will appear like this below. Here we will work from the bottom going up and fill up all our COMMENT tags.

The first one at the bottom that says: <!--PUT YOUR NAME OR BRAND HERE -->, you would put your name, or brand, or remove it or just leave it as is (the browser or user agent will not render it anyway if it's a COMMENT tag). Here you would change the license for this video as you would replace it with © Copyright blah blah 2013 etc. if applicable. For myself, everything is Creative Commons, GNU, Public Domain or Fair Use stuff so you should consider what license you're publishing your video as, and avoid problems.


Now we go back to the other editor, of the other page, where the video is located and we just copy the http:// part for the thumnail we just uploaded, to the end of that string which would identify the file type (like: png, or jpeg etc.), as shown below, that's located, after, where it says scr= between any quotation marks and nothing more and paste this to the part of your main-page editor that says: <!--PUT HTTP of THUMBNAIL HERE--> by/and replacing it. If the string is longer (after the .png or .jpg) and you copy the whole thing until the closing tag, you are defeating the entire point of this exercise because those things are instructions to tell the server things to do, which you don't want.

The other stuff, if it's there (Like if you uploaded the pic with centering added and other effects) is for mobile users and people who use WYSIWYG editors since the sharpness setting (the /s640/ part of the string) now renders size instead. For this particular thumbnail pic, I asked for nothing (as you too should do for these type of things) but the others, like my illustrations, I specified 'Centering' and 'Large' and then I changed the s value setting from s640 to s740 which fills up the page more than s640, which it never did in the past but only made the picture sharper necessitating the need for divisions [DIV] to control their size and besides, I don't care what servers do to this page. These things I purposely place on small pages like here (compared to my long articles on Thermodynamics) to keep an eye on things that "Developers" are up to and never do this on any of my longer articles. I write my own markup to control these things.

Anyway, this will all now be controlled by the new markup and code on your main page and will do no harm to mobile users. This stuff is just there for people who don't know how to write HTML and for social networks where everything is being more and more handled externally now with drag and drop features and online applications that are more prevalent now, and stuff like that.


The next thing is to control the size of your popup box for widescreen or 4:3 aspect ratio since we don't want a box that is imbalanced where the video floats left instead of being centered, which all depends on the aspect ratio of your video. You'll see in the JavaScript right after 'popup' that I left a choice for you that works with standard video rendering on the web for either widescreen or 4:3. Very Carefully remove one or the other in the part that says :

'width=695 (0r 835 for
widescreen),height=500'. This video clip happens to be the old aspect ration, so I take out the part that says (0r 835 for widescreen) where it will appear as this now, ex:: ','popup','width=695,height=500');"

Now we go back to our HTML editor where the video is located and clear up any old left-over image code that we had cannibalized and we publish the page. Now open the webpage from your dashboard and go to the address bar and add the ID to the end of the string by placing a hash symbol first (#). So in my case it is #punk (example below highlighted in blue) where I then refreshed the page and it opened only to the ID "punk" part of the HTML that looks like <a id="punk"> in the editor. Copy this new http:// altered string on your address bar and paste it to the part of the JavaScript that says:

<!--PUT HTTP of URL (PAGE) WHERE VIDEO IS LOCATED ON WEB HERE --><!--PUT a # KEY AND ID, (LOCATED ON SOURCE PAGE), HERE --> making sure you do not disturb the Title marks between the COMENT TAGS, otherwise it won't work.

Your done!

Above: Now we see the purpose of the multiple BR tags where we don't need to see the unsightly header at the real top of the page where it would open normally (in this case) or the social network buttons at the bottom. This video website for HTML'S MAGIC also has a black background too, which was adjusted to be so from the template settings because it's only meant to show video exclusively. I don't write things or post pictures here, — only video. Here the positioning is perfect (you, for your site may need to adjust things a little) because when the popup box opens for this page it will open from the top and left of where you put your ID tag always and visitors/users will only see this part. Also, the advantage here is you get to see the real statistics for any of your videos because you also know where and how they accessed that video too.


Now we return to the main editor and publish or update it. It should look something like this, where this is just an example:


Below: The result after clicking on picture. I changed the code in the DIV element for the picture (second line) from [ float: right; ] to [ float: left; ].

Note that since this is just a picture, you can alter the thumbnail to reflect your logo or brand name of your site or business by putting a picture of your favicon onto the video and removing the You Tube Logo, whatever your preference desires.

This procedure might appear complicated but it gets really simple overtime once you get used to it. I do these things in two minutes now while hardly bothering or paying attention as it just becomes routine. This thing is best of all Google-interference proof and will remain stable beyond the point where any apps of today will last and become a distant memory themselves, where they get taken over by some other new wave, since this is basic stuff that can't be toyed with, which is stuff these fancy developments depend on to exist in the first place. What's good for the goose is good for the gander.

GP du Berger
Top of Page