Embedding a playable video in gmail without using iframes [duplicate] - html

I use codeigniter to send email... After activating the user account it sends another email to insert tag but when the user receives the message, no tag appeared but when I tried using other elements like or it renders the style but how come doesn't?
$message = 'Congratulations! Use the script below to add your widget.<br>';
$message .= "<iframe frameborder=\"0\" src=\"<?=base_url() ?>business/widget/{$id}\" height=\"320px;\" width=\"480px\" style=\"border: 1px solid #ccc;\"></iframe>";
$this->email->message($message);
if($this->email->send())
{
other code....
}

Gmail and many other email clients are very strict about what HTML you can use in your HTML emails.
<iframe> is strictly off limits, because it could expose the user to a website which they were not expecting, and the website at the other end could record info about the user (such as their IP address). Images are blocked for similar reasons.
If I were you, I'd stick to using super basic HTML and CSS. Focus on getting the message to the user and hope their client makes the message look pretty. Always offer a link to view the full message elsewhere.

<iframe>s cannot be used in most email clients – whether in an application or as a website. They are either stripped for one of several reasons:
The mail/web client could have trouble rendering it, so it is excluded.
An <iframe> could be used for phishing/malicious attacks, putting malicious code in what was otherwise vetted and safe (the browser/client can't see or scan what gets loaded into an iframe, it just loads it into the DOM).
An alternative, (what YouTube do), is instead of embedding something in an iframe (in their case, a video), they have an <a> wrapped around an <img> or thumbnail, which gives the impression that you are playing a video. All it does when you click on it, is it take you to that video's URL.
If you were trying to put extensive code into the email, you could manually write it in. This however has other effects, as some other tags are limited/styling can be a big hassle for emails. AFAIK some HTML5 elements are also stripped from emails.
As Orangepill said, Campaign Monitor have done the legwork and provided a chart showing where iframes can be used. They also suggest to stay away from iframes.
A solution not mentioned would be to have an image, with a link at the bottom that says View this message in a webpage which will take the user to a page with the <iframe> working.

Related

How should I treat iframe and canonical tag?

I have a page which contains an animation that is embeded in thousands of websites where the company I work for run ads.
However I would like to embed this animation in the website of the company that I work for because they produced the animation (of course). When our ad-partners embed our animation they use an iframe pointing to
http://example.com/pagina_animacao/
So I created a page inside the company I work for's domain containing this exactly iframe:
http://example.com/?q=aceitar-contrato-criacao-site
Because this iframe can be considered as duplicate content (it is published at /?q=aceitar-contrato-criacao-site and at /pagina_animacao/) I went to the URL /pagina_animacao/ and configured the canonical tag as:
<link rel="canonical" href="http://example.com/?q=aceitar-contrato-criacao-site"/>
Is this the right thing regarding canonical standards to avoid having duplicated content?
After waiting some time to Google crawl this website I took a look at the report and indeed, the URL https://www.sitepor500.com.br/pagina_animacao/ is not being listed anymore as an indexed URL \o/
I also used SEARCH CONSOLE (tool from Google) to see what Google was seeing at https://www.sitepor500.com.br/?q=aceitar-contrato-criacao-site and it crawled this page CONSIDERING the content of the iframe! I just did a search at google by:
site:sitepor500.com.br "semantic ui"
And Google showed at the result the link that CONTAINS the iframe! \o/ I used the word "semantic ui" cause that 2 words only appears inside the iframe in my entire domain. So it's a pretty good test case!
So you CAN and you SHOULD use canonical tag inside iframe cause people MAY embed your iframe in external content and your iframe content will probably appear as duplicated content!

Facebook, StaticHTML and form summission

This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!

what is the #! sign in the url what does it mean? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
What is it when a link has a pound “#” sign in it
i saw the #! sign in the url
like :
http://www.google.jo/#!
but i dont know what is it mean?
i know that
this
http://www.foo.com#bar
is used to link an element in the page .
but what about ! character
It's called a URL HASH and is used for in-page bookmarking. It is now also used to maintain page state in AJAX applications. Anything after the # can easily be parsed and re-written without forcing a page reload, allowing the JavaScript code to load/hide/show page elements based on the developer's choosing.
It is called a hash, and it is used to denote an anchor in the page. Basically when the page loads it will seek out the anchor and scroll the page to it.
http://www.google.jo/#hl=ar&source=hp
<div>content</div>
<div id="hl-ar">scroll here</div>
<div>content</div>
Traditionally, the # was used in URLs to tell the browser to jump to an anchor in the page with the name following the #.
In modern AJAX applications, it allows modification of the location bar URL without the page needing to reload, allowing the Back button on the browser to move back through AJAX state, as well as bookmarking of AJAX pages.
# in the url acts like a goto statement. ie move to a particular section of the same page.
Besides that it is also used by applications that heavily use ajax to render the larger part of the website without refreshing the page (ie the page doesn't refresh but a considerable amount of html is requested from the server using ajax giving an impression that an entire page is loaded).
These apps face a problem that when the users click on the back or refresh button in the browser, it may not show them the correct page because there is no refresh happening. So a work around is applied by appending the history information to the url separated by #. And when the user clicks on refresh or back button, this information is used to take them to the correct page. There is a jquery plugin available that does this.
Also recently I came across this doc from google that explains how to make ajax applications 'crawlable' by using #! in the url
(#) is a hash sign.
It's used to indicate named parts of a page which allow the website to link to not just a page, but a particular part of it.

How to display part of a webpage using iframes?

How can I make an iframe that will display only part of the iframes' webpage?
Lets take youtube for example.
How can an iframe display only the youtube video player?
Thanks,
Oded
This is impossible: An iframe will always show the full document. The Same Origin Policy will prevent you from taking a part out of it.
The only workaround would be to fetch Youtube's HTML data from your server (using a server side language), then translate all relative references contained in the page, and output it as if it were a page on your server. You could then isolate specific elements from it because you're in the context of your own domain. This is called setting up a server side proxy.
However, this is a highly imperfect and tough process, and almost (sometimes completely) impossible to get right without breaking stuff, especially with JavaScript and Video. Plus it's most likely illegal, at least in the case of YouTube.
If you're looking specifically for YouTube, you could just fetch the embed code dynamically for the video you're after and display it that way. If you're looking for a general solution, you're in for a long session with the HTML for the target site. If you figure out that your content is all within a <div id='content-you-want'>, for example, then you could do something like:
$.get('proxy.php?url=' + urlEncode("http://my-target-url.com"), function(result_data) {
$("#target-element").html($(result_data).find("#content-you-want").html());
}
if you're using jQuery. But there's still a load of work to be done if the stuff you want isn't conveniently all wrapped up in a div with an id. And you'll need proxy.php to beat the same origin policy.

iframe to external sites

Is it legal to have an IFrame on a website which inside has an external website?
In an IFrame is it possible to only show a section of the src that isn't the top left of the site (for instance if there was a chart in the middle of a website, could u have just the chart in your Iframe, or at least start it centred there)
Is there any way to stop my IFrame from auto redirecting me to the external site
for 3: ie
<iframe src="http://fifa.com"></iframe>
Just sends me to fifa instead of actually showing that site in a frame.
Instead of using an iframe is it possible to copy the chart and source it back to where you got it from?
Fifa is probably using javascript to prevent you from placing the site in an iframe... and it's generally a pretty shady thing to do.
This depends on the rules of the external website. You should at least ask them for permission and only do it if they are OK with it (no replay does not mean they agree!)
No, an IFrame is like a new browser.
If the external site uses JavaScript to break out of frames, then the only way to prevent this is to disable JavaScript in your browser.
I guess it's legal, but it isn't decent.
Ah, so you only wanna show the scores i.e., I guess there should be a way, but again it's not decent, you just don't use such constructions, you just don't!
No! That's exactly the point of that redirect. The only way to do that will be with javascript disabled.