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!

How to make Audio.js inline with text in moodle quiz

So I am using audio.js on my website. I customized audio.min.js that there would be only "PLAY/PAUSE" button visible. I want that button to appear at the left of the text. How can I do that?
Cause right now, text always appears bellow "play/pause" button, in a new line. I want it to be on the same line.
The code on my HTML page looks like this:
<audio>
<source src="https://www.website.com/voice/sample.mp3">
</audio>
<!-- This is the text I want to see on the same line as the audio tag which is in use with audio.js -->

You have to overwrite audiojs's css in order to modify, and try to add something like this css:
.audiojs {
float:left;
}
There is code: https://jsfiddle.net/qp5xjxb9/1/
I hope it helps

Disable HTML 5 video from loading

I have a setup where there is a background video displaying depending on the current weather conditions, shown here: http://pitfarmtennis.co.uk/cms/.
There are 6 different videos, currently the jQuery code to decide which to show just sets them to display:none, This sadly means all of them still load.
This is the jQuery that is currently making a certain video play, in this case a sunny video:
/*Day-sun*/
if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
$('.home-bg-sun').css("display","inline");
}
One solution I have tried is to set all of the src attributes in the HTML to data-src, and then changing the relevant one to src to fire the video, which hasn't worked to date, but I might have done something wrong:
jQuery:
/*Day-sun*/
if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
$('.home-bg-sun').attr('src', $('.home-bg-sun').attr('data-src'));
}
HTML:
<div class="home-bg-sun">
<video class="home-bg-sun-video" autoplay loop poster="wp-content/themes/eddiemachado-bones-9db85e4/library/images/home-bg-sun-first_frame.jpg">
<source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.webm" type="video/webm">
<source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.mp4" type="video/mp4">
</video>
</div>
Any help would be much appreciated!
PS: I am using Yahoo Weather to fetch weather conditions.

There is a preload attribute on the video element.
You may want to try the metadata or none value.
But note that this attribute is only a hint for browsers, which are not forced to follow it.

You can try to remove "autoplay" attribute from hidden videos, and refactor your hypertext like:

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>');
})

Auto repeat with Flowplayer or how to pass callbacks as strings in javascript

I have an embedded flash video player on html page,
something like this:
<embed id="flash-videojs-31-field-mech"
name="flash-videojs-31-field-mech"
src="http://releases.flowplayer.org/swf/flowplayer-3.2.5.swf"
width="320"
height="240"
type="application/x-shockwave-flash"
allowscriptaccess='always'
allowfullscreen='true'
flashvars="config={'playlist': [ {'url': 'http://example.com/president.mp4', 'autoPlay':true, 'autoBuffering':true} ]}"
/>
Now I need to add an auto repeat functionality. I found this solution: http://flowplayer.org/forum/3/20130
Unfortunately, it involves passing function objects around and I have difficulties inserting it into flashvars attribute.
I can't take it as is, cause html snippet is actually generated by third party code and I want to keep number of tweaks minimal.

If you're using flowplayer, then you possibly can modify it after the embed is done.
Try using their API and doing something like:
$f().onFinish(function() {
this.stop();
this.play();
});
This should enable autorepeat for all players on your page. You may also use filter to select the players you need.