Develop Reference

How to add inline style to a video/gif embed code that is not part of the DOM?

I have various embed codes from different gif/video sites eg
<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
Each site has different ways of embedding eg <iframe>, <a>, <div> etc for the opening tag. All I need to do is add inline style to the first tag in the embed code. I thought of registering the element etc but that will fail as it will create outer tags etc. How can I achieve what I want dynamically preferably in jquery but javascript is ok. Ie The embed code will be placed in a input field and onpaste I need to insert the style then display the element. Is using regex my only option?

The tough thing is that if your embed works through an <iframe>, the content is not there before it is in the DOM, and it is the content of the iframe that you need to manipulate (some other types of embeds inject directly into your DOM, those should be easier to add style to before attaching).
This may work:
var embedCode = '<iframe src="https://player.vimeo.com/video/122375452?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
var embed = $(embedCode);
embed.on('load', function() {
// The contents are loaded. add the styles however you choose
embed.contents().find('body').css({
width: '100%';
// etc...
});
});
// now add the iframe to your dom
$('#myEmbedContainer').append(embed);
In your question you mention using regex - I suspect you mean either to detect if it is an iframe embed, or to look into the contents of the loaded iframe. In case 1 (detect if your embed code has an iframe tag), it is probably ok. In case two, I would not try to use regex on a full document in an iframe. Jquery selectors can help you find various wrappers inside the iframe, and that's probably a better way to go. For example:
var styleRecipient = embed.contents().find('body');
if (!styleRecipient.length) {
styleRecipient = embed.contents().children('div').first();
// etc.
}
This is a complicated problem, and I would focus on making it work one embed source at a time. Good luck!

iframe content returning undefined

I have a website preview in an iframe.
<iframe style="width:100%;height:850px;" id="myframe"
src="https://www.example.com"></iframe>
There is an input field on that website with the id and name of 'firstField'. However, it returns undefined when I do this:
alert($('myframe').contents().find('#firstField').val());
Is there something I can doing wrong?

You're specifying the wrong selector. The correct one to select the iframe is $("#myframe").
Change the code to this, and retry:
alert($('#myframe').contents().find('#firstField').val());
To learn more about the ID selector, refer this guide.

ng-src attribute in an iframe doesn't accept expressions ? using Angular.js

I am trying to display the youtube video of a specific ID that i can take out of my array. I use an expression to fill in this ID at the right place in my ng-src attribute , but it doesn't work. I used the same expression above the i-frame to see if the expression is working , and it did.
<iframe allowfullscreen=""
frameborder="0"
height="315"
ng-src="http://www.youtube.com/embed/{{selectedSong.youtube_ids.default}}?rel=0?rel=0&hd=1"
width="560">
</iframe>
As you see i used the {{selectedSong.youtube_ids.default}} expression for my id but when I inspect my html when running it is displaying the expression instead of the result (so I'm sure it isn't working).

As far as I know, this don't work because of security matters to previne xss attacks. But you can create a filter to trust the url like:
angular.module('filters', []).filter('trustThisUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
And then call it as filter of the url in src
<iframe ng-src="{{ anUrlFromYourController | trustThisUrl}}"></iframe>

I have found a better solution for this where the bug is resolved:
Alternative to iFrames with HTML5

in your controller : insert in parameter : $sce
function($sce, ...)
$scope.linkYoutube = $sce.trustAsResourceUrl('http://www.youtube.com/embed/'+data['yourLink']);
Then in the html, you can use `ng-src="linkYoutube"

embed Flashplayer in Iframe

How can I embed the Flash player into a webpage using a Custom Url . Doing this with Iframes instead of using object tags in the html.Would I need to use javascript to achieve this?

I don't see why you can't simply use the src attribute like:
<iframe width="100px" height="100px" src="youSwfFile.swf"></iframe>

An option is to use jQueryTools flashembed(), this allows you to embed a flash object into a div... Which may be a good starting point for you.
$(document).ready(function() {
//jquery call to embed flash object,
flashembed("#frameID", {src: "the-SWF-URL",wmode:"opaque"});
//set width and height - ffox fix
$('#frameID').css({'width':'564px','height':'160px','z-index':'-1'});
});
for more info and options - http://jquerytools.org/documentation/toolbox/flashembed.html

Jquery - Replace Specific Line in HTML

I'm having an issue with iframes and IDs.
I currently have an Iframe with no ID attached to as its generated by another websites javascript. So I quickly wrote a Jquery script to give IDs to Iframes on load of page, and it worked successfully. Problem is however, it applies the ID to ALL the Iframes on the page instead of specifically the one I want.
This is what I have.
<script>
$(document).ready(function () {
$("iframe").attr({
id: "iframeid1"
});
});</script>
Is there a method with Jquery to 'search and replace' something specific on the page? For example
Search for:
<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"
Replace with:
<iframe id="iframeid1" allowtransparency="true" frameborder="0" scrolling="no" width="160" height="600"
Any help is appreciated! Thanks in advance!

If you know it is the nth iframe on the page:
$("iframe")[n].setAttribute('id', 'iframe1');
EDIT: You could also use attribute selectors:
$("iframe[allowtransparency=true][frameborder=no][etc=etc]").attr({id: 'iframe1'});

It depends on if there is a unique way of finding the iframe you want. For example, is it the only one with width = 160 and height = 600? Or is it always the Xth iframe on the page? Is it always located in the same spot in the page?
Here are some queries as examples for all 3 scenarios:
// if the width/height combination is unique...
var iframe = $('iframe[width=160][height=600]');
// if it is always, say, the 3rd iframe on the page
var iframe = $('iframe:eq(2)'); // 0-based index
// if it is always the only iframe in a div with an id of "iframeContainer"...
var iframe = $('#iframeContainer').find('iframe');
Then you can set the attribute like you said:
iframe.attr('id', 'iframeid1');

if the iframe is wrapped inside a div, with a ID, than you can do:
<script>
$(document).ready(function () {
$("#divID iframe").attr({
id: "iframeid1"
});
});</script>

If you know where your iframe is at you can get it by index position.
If you have 4 iframes on the page and you're looking for the third (with respect to the DOM), you can do this:
$("iframe").get(3).attr({
id: "iframeid1"
});

You can use selectors to find an iframe tag with specific attributes. But you need to be able to uniquely identify the specific iframe you want from attribute values, not HTML search.
As an example:
$('iframe[width="160"][height="600"]').attr("id", "iframeid1");
This would select iframe tags with width=160 and height=600. You can add more attributes if needed to uniquely select your particular iframe.
Perhaps the best option would be to use the DOM structure around the iframe to identify which one you want. You could use parent object identifiers, ordering of the tags, etc.. whatever helps uniquely identify the one you want.