Develop Reference

Call another function with controls video (HTML, JS)

I have a question,is it possible to call a javascript function with the play button from the video tag controls ?
<video controls id="video" src="../../data/myvideo.mp4"></video>
I don't know and I didn't find how to have acces in JS to the play button from the "controls".
I tried getElement or query but nothing works.

video tag has onplay attribute you can give custom func.this attribute. Also you can see all different video tag attribute with console.log getElementById("yourTagId")

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!

How to get iframe src value dynamically in nightwatch test case?

My html dom includes a tag and the value of the src is dynamically generated. Please see below screenshot as an example:
I want to test the dom under the selected iframe tag:
<iframe class="ide-page-frame" ng-src="http://localhost:8080/che/wksp-rn6c?uid=514006" src="http://localhost:8080/che/wksp-rn6c?uid=514006"></iframe>
I use below method to load the frame and put the assert code in the callback function. But it doesn't find any dom. The code is shown as below.
browser
.url('http://localhost:8080/dashboard/#/ide/che/wksp-rn6c')
.frame(".ide-page-frame",()=>{
// it can't find any dom here
})
})
If I load the dynamical url http://localhost:8080/che/wksp-rn6c?uid=514006 directly, it is able to find the dom elements. So I want to know how I can get the url from the iframe src in the test case. Does nightwatch support something like $(.ide-page-frame).getAttribute('src')?

I think that your problem is in browser.iframe(".ide-page-frame")
nightwatch will look for an iFrame having the id="ide-page-frame" which does not exist in your page.
If the frame id is missing or null, the server should switch to the
page's default content.
My proposition: Please change your iFrame creation by changing class="ide-page-frame" by id="ide-page-frame" (or you can just add the id and keep the class)
<iframe id="ide-page-frame" class="ide-page-frame" ng-src="http://localhost:8080/che/wksp-rn6c?uid=514006" src="http://localhost:8080/che/wksp-rn6c?uid=514006"></iframe>
Does this solve your problem?

How to load a video into a separate div when click on a link

I have these 2 divs - one contains the menu, where each element of the list will be a link to a video, and I want the corresponding video to be loaded into the div, which is right next to the first one.
I was thinking about forms, but this is not quite a good idea. And I have no knowledge in JavaScript or JQuery, so some solutions, provided with explanation how to use, will be really helpful.

On click of the Video URL, first if its an anchor, use preventDefault and block the click behavior, next bind your own onclick event on that element.
On-click of that element should actually use the next div's id and be able to play ur video in that div in whatever manner you want.

Something like this should work:
HTML:
http://youtu.be/Etst4t3ES8Y<br/>
http://youtu.be/Etst4t3ES8Y<br/>
http://youtu.be/Etst4t3ES8Y<br/>
<br/>
<div id="videoDiv"></div>
jQuery :
$('.link').click(function(event){
event.preventDefault();
var url =$(this).html();
$("#videoDiv").html('<iframe width="400" height="400" src="'+url+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>');
})

How to Remove a iframe by jQuery

I create a iframe in a div by jQuery.Then I load another page(lets say page A.jsp) into that iframe. The page 'A.jsp' has some functionality and end of it, the parent iframe should be removed from the first page when a button in 'A.jsp' is pressed . Loading the page 'A.jsp' into the iframe is OK. but I can't remove the parent iframe. How I tried was, select the parent tag iframe then, remove it. but it didn't work. Here is how I tried.Here $(this) referes to a button in page A.jsp and &('div iframe')referes to the parent iframe
$(this).closest($('div iframe')) .animate({
opacity:0
},500,function(){$(this).remove()})
How can I remove the parent iframe ?

This should give you the info you need.
https://stackoverflow.com/a/4689154/897871
Note: the page that hosts the iframe and the page with the content will have to reside on the same host.

To which element does this refer to?
To access the iframe you should point to:
parent.document
or
parent.$("iframe")
if you want to use jQuery.
Same Origin Policy is always involved here, so pay attention to what you can actually do.
Another solution is to reload the parent page using a simple link that has target="_parent".
see also here:
How to access parent Iframe from javascript

The iframe can be fully remove from the DOM by the remove method
eg
This is my iframe
<div id="videoPlayerOP" > <iframe id="optionsPlayVideo" width="520" height="348" style="margin-left: 80px;margin-top: 7px;" src="about:blank"></iframe></div>
After loading some source in it, It can be remove by
$($("#optionsPlayVideo").parent()).empty();
If you want to reuse them them append another iframe in it
$('#videoPlayerOP').append('<iframe id="optionsPlayVideo" width="520" height="348" style="margin-left: 80px;margin-top: 7px;" src="about:blank"></iframe>');
Thanks