How to embed zoom video on a moodle website? - php

I wanted to embed a stream of a Zoom meeting into HTML and allow users to attend meetings directly inside of an application. I used the following code.
<div class="iframe-container" style="overflow: hidden; padding-top: 56.25%; position: relative;">
<iframe allow="microphone; camera" style="border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;" src="https://success.zoom.us/wc/join/{meeting-id}" frameborder="0"></iframe>
</div>
It worked succcessfully in a basic php site.
Is it possible to apply the same to a moodle website...?
There is a moodle plugin "Zoom Video", but it does not provide this functionality.
How can I add a separate code to embed zoom video on a moodle website...?

One solution is to add an HTML page from Moodle activity and put your HTML code in it.

I found this Zoom embed code generator on https://www.fullstacksys.com/zoom-embed-code-generator that generates Zoom embed code from Zoom SDK and I can use it for my website however it doesn't support mobile yet.

Related

How to set video icon permanently on image

I want to set permanently video icon on image, but i can't. When i do that, two image are showing: 1. video icon 2. my image, but not adjust 1 and 2 at once one image.
More Clearly: I wants to share a photo with video icon. I have image without video logo. I wants to add video logo on image using code. I don't wants to set logo using photoshop.
HTML:
<div class="video">
<img style="height:200px" src="http://i.imgur.com/GMjqTR7.jpg"/>
</div>
CSS:
.video {
position: relative;
}
.video a {
position: absolute;
display: block;
background: url(/images/play-btn.png);
height: 100%;
width: 100%;
top: 75px;
left: 150px;
background-size: 50px 50px;
background-repeat: no-repeat;
}
Please Help Me. Thanks.
JSFiddle - Live
This can be done on the client or server side. Based on the fact that your example only contains front-end code, I'll assume you want to this on the front-end.
Take a look at watermak js
http://brianium.github.io/watermarkjs/
For a server-side example, see this answer
Add 'Watermark' to images with php

PHP Joomla Malware Hidden links remove

I have a site which automatically adding hidden links under contact us page and other 3 pages.
i removed all the Malware codes but it still renaming on that pages, i also checked in database but no sign can't find any signature.
this is the links appear on page
<div id="xXQrAdjTl" style="position: absolute; top: -1004px; left: -1540px; width: 307px;">buy cheap cialis without a prescription</div><div id="ncRJZxHun" style="display: none">click here</div><div id="fEBXspOQy" style="display: none">buy viagra in uk</div><div id="xkjzURHcT" style="position: absolute; top: -1406px; left: -1219px; width: 312px;">where to buy viagra us</div><div id="uOowZjjxU" style="display: none">buy cialis jelly online</div><div id="azLaUHwiz" style="position: absolute; top: -1139px; left: -1339px; width: 381px;">how to buy cialis online</div><div id="MOJlSmEJB" style="position: absolute; top: -1827px; left: -1499px; width: 395px;">cialis 20mg</div><div id="kgfcUmRGa" style="position: absolute; top: -1828px; left: -1180px; width: 335px;">buy sildenafil online</div><div id="IRDsypfZH" style="position: absolute; top: -1307px; left: -1933px; width: 366px;">buy viagra Canada</div><div id="ZCqjPbqoe" style="position: absolute; top: -1887px; left: -1018px; width: 312px;">viagra online here</div><div id="bjWiPvCoY" style="display: none">buy zithromax online cheap</div><div id="boFBzznoh" style="display: none">zithromax</div>
i checked the site with http://sitecheck.sucuri.net/results/www.delmaproduction.nl/nl/
they gives security warning.
site url is www.delmaproduction.nl
i also disable the javascript on browser and check but still this links appears, also checked on those all template files no luck even remove base64 codes.
using joomfish and ARTIO Joom Sef as main extensions
anyone know how to fix this. thank you
There's a chance your site has been hacked. Suggest you use a tool such as MyJoomla to scan your site and use the instructions on the Joomla Docs Wiki to help recover your site.
Thanks for sharing this !
I had the same problem and also found an index file without an extension in the libraries/joomla/cache/handler folder.
I first deleted it but then I got a totally blank homepage !
I recreated an empty index file with permission set to 444, hope that will do the trick until I finally migrate to the newer Joomla version.
i Solve that, it's on libraries/joomla/cache/. some files created without extension called index

Which simple way is there to display a progress bar in most modern browsers?

So I have this:
<progress max="100" value="50"> <strong>Progress: 50 of 100 done.</strong>
</progress>
In Opera that works fine, in IE it only displays "Progress: 50 of 100 done" without the bar.
Which simple way is there to display a progress bar in most modern browsers? It is being updated only once the page is loaded so no ajax and so on is needed.
Im sure there are many javascript solutions. Try the jQuery UI Progress bar, it should be more reliable in inferior browsers than the HTML5 tags.
http://docs.jquery.com/UI/Progressbar
The simplest way to display a progress bar without using the <progress> tag is:
<div style="position: relative;">
<div style="position: relative; z-index: 2; text-align: center;">Progress: 50/100</div>
<div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; background-color: blue;"></div>
</div>
It's easy enough to animate too, if you wanted, just by changing the text and the width style.
If you do not want to use jQuery for this and still make it compatible with old browsers take a look at this blog post.

Print Canvas wrap with 3D perspective preview

I am looking for something that would allow me to render an uploaded image with a 3D perspective and a wrap effect like here.
This will be in the form of a cropping preview using a jQuery library such as jCrop
Currently I was able to achieve the 3D perspective using Reflex.js but looking for a more subtle solution with the wrapping effect as well.
Any help will be appreciated :)
Thanks in advance!
Your requirement of IE9 support basically mandates a canvas approach if you want to keep it client-side. You could of course do the rendering server-side and AJAX load the rendered image back in which will work in every browser.
If you decide that you can dump IE versions less than 10 (or at least just show them the normal photo without the transform then you can do the wrap-around effect with a combination of CSS 3D Transforms and CSS2 clip. Something like:
<!DOCTYPE html>
<style>
body { margin: 100px; position: relative; }
.edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
.panel { position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
.panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>
To break that down, we’ve loaded the user’s image and dropped it into the page, along with a div with the same image set as a background. That div is set to be a thin width and a height that’s almost as tall as the main image. We can use the background-size property to foce the background image to fit the div even if it’s taller.
We then absolutely position those two so that they’re next to each-other. The CSS2 clip property lets us clip off the left 20px of the image so that at this point the div and img look like one image together.
Finally, we set a perspective and transform-origin for each block and rotate them away from each-other around the Y axis. Because of the clipping we have to fudge the .edge block to be slightly smaller than originally (with a 200px tall image I had to drop it to 196px to look good) but that works pretty nicely for me.
Obviously you’d need to fill in the vendor prefixes (-moz-, -ms-, -o-, -webkit) and I’ll leave the shadow as an exercise for the reader (a simple background on the container would probably do).

Best practice: delivery of a wallpaper banner with OpenX

I am looking for a solution to deliver a "wallpaper" banner with the adserver "openx". A wallpaper consists of a leaderboard banner (728x90 px) and a vertical skyscraper. I cant find any option in OpenX itself, so I guess there must be some kind of dirty methods to get it done.
Anyone here having experiences with it? I'm thinking of delivering just an leaderboard banner and then attaching a html snipped to the banner - which contains the markup to my skyscraper-banner... :-/
greg0ire > You can see an example of a "wallpaper" banner on this site (you might experience an overlay banner before, make sure you disable ad blocking extensions): http://www.allocine.fr/ Some days it is in flash, other days it is just a background-image css property set on the body element. I'd like to achieve the second option.
Thanks!
I got wallpapers ads to work through openx using this method.
First I created a div below the content wrapper of my site (using wordpress, header.php file).
<div id="adbg" style=" margin: 0pt auto; height: 1000px; width: 100%; position: fixed; cursor:pointer; ">
Then I created a div block with the wallpaper image in the CSS and added it to OpenX as a TEXT BANNER
<div OnClick="location.href='#';" style="background: url('image.jpg') no-repeat scroll center top #026eb4; height: 100%; width: 100%; margin: 0pt auto; cursor:pointer; "></div>
Finally, I took the openx embed code and place it within the ADBG div I pasted above.
This technique worked well for me on all browsers.
You can of course take the CSS in the adbg div and store it in your CSS file.
For the moment, I ended up doing this, but I'd like to see better solutions:
<div class="openx_<?php echo $_block->getBlockParameter('css_class');?> openx_background hidden">
<?php echo str_replace('INSERT_RANDOM_NUMBER_HERE', rand(0, 9000), $_block->getBlockParameter('html', ESC_RAW));?>
<?php echo javascript_tag()?>
var checkImg = window.setInterval(function(){
if (jQuery('.openx_background img').length)
{
jQuery("body").css('background', 'url("' + jQuery('.openx_background img').attr('src') + '") no-repeat');
window.clearInterval(checkImg);
}
}, 1000);
//give up 3 s later
setTimeout(function(){
if (jQuery('.openx_background img').length == 0)
{
clearInterval(checkImg);
}
}, 3001);
<?php echo end_javascript_tag()?>
</div>
$_block->getBlockParameter('html', ESC_RAW) contains the openx javascript invocation code.
Not sure if this is still of interest, but there's a setting in openX for that called "Companion positioning". Have a look at the OpenX reference guide under point 4.6:
http://opensourceusers.com/sites/default/files/openx_reference_guide.pdf
It's a method to make sure that a skyscraper is delivered every time a certain leaderboard is delivered. You can then use the prepend/append functionality to color the background to turn this "hockey stick" into a full blown wallpaper.

Categories