Stickman's site is down now - looks like he took it off line. I just found out that IE8 breaks the youtube embed for his lightwindow. IE8 tried to download the file from the link instead of displaying it. Anyone have other solutions or a work around for IE8?
Found this page where someone sucked down his How To page before it was taken down.
The YouTube video link shows the issue.
http://edu.cnzz.cn/adcode/demo96/
Thanks!
i believe the problem is related to the lack of a filename extension and lightwindow's inability to determine a file type. Adding ".swf" to the end of the youtube URL allows the video to play directly or through lightwindow without error.
I have found a dirty solution for the problem. I replaced the following line
$('lightwindow_iframe').setAttribute('src', this.element.href);
with this
var youtube_content = '<object width="500" height="300"><param name="movie" value="' + this.element.href + '"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="' + this.element.href + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="500" height="300"></embed></object>'
this._writeToIframe(youtube_content);
It works, but you can't open other external pages with this fix. Only Youtube embed Video works with this.
Since stickman's solution isn't supported anymore I switched over to another solution.
http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
works well.
Related
So, I have an challenge with webp images on my site. As you can see below it doesn't show the image but instead renders the image code.
When I use a jpg file it's works like a charm. My code is below. The image should be shown as 'cover' on a div. The framework I use is Foundation 5. I know it is outdated but I'm working on a new site and for now don't want to upgrade but thought serve webp images instead of jpg's could be a quick fix to limit the bandwith on Cloudinary, where the images are hosted.
<div class="small-6 medium-4 large-4 columns" style="background-size: cover;" data-interchange="[/-/media/Global/NoImage.jpg, (default)], [https://res.cloudinary.com/Company/image/upload/w_195%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (small)], [https://res.cloudinary.com/woningnet/image/upload/w_300%2Ch_195%2Cc_fill/f_auto/v1625496788/MainFolder/T/3554/t2scdia2gtw8vswjh575.webp, (medium)], [https://res.cloudinary.com/woningnet/image/upload/if_ar_lt_1%3A1/h_600/if_else%2Cw_800/if_end/c_fill/f_auto/v1625496788/WRB/T/3554/t2scdia2gtw8vswjh575.webp, (large)]" data-uuid="interchange-qqqAg0">
I've been searching online but so far no solution, most things I've found where explanations why you should webp. Any idea's?
I happen to be using Foundation 6.7.4 and found the solution by making a change to the foundation.js or min.js file depending on which one you are calling and adding |webp to the end of the path match.
(path.match(/\.(gif|jpe?g|png|svg|tiff)
to
(path.match(/\.(gif|jpe?g|png|svg|tiff|webp)
Edit/Update: I Found a copy 5.5.1 on an older site the foundation.js or min.js
if (/\.(gif|jpg|jpeg|tiff|png)([?#].*)?/i.test(path)) {
$(el).css('background-image', 'url(' + path + ')');
el.data('interchange-last-path', path);
return trigger(path);
}
Should be able to add |webp
if (/\.(gif|jpg|jpeg|tiff|png|webp)([?#].*)?/i.test(path)) {
$(el).css('background-image', 'url(' + path + ')');
el.data('interchange-last-path', path);
return trigger(path);
}
I am using youtube video in joomla where the code is like this :-
[jv_youtube url="https://www.youtube.com/watch?v=8Di0IOQssOM&rel=0" width="600" height="540" responsive="yes" autoplay="no" rel="0"][/jv_youtube]
What I want is to stop showing related other videos come at the end of video. I want to replay the video or just stop.
I know how we can stop this - by putting ?rel=0 but you can see I have already put &rel=0 and also rel="0" but still the issue persists.
Any idea? Anyone? How to do this in Joomla?
Thanks.
Sorry but could not find any clean solution for this but still somehow I managed to get it working as the way I wanted (rel=0)
I put this script :)
<script type="text/javascript">
jQuery(document).ready(function() {
var ifrm = jQuery(".jv-youtube iframe");
ifrm.attr("src", ifrm.attr("src")+"?rel=0");
});
</script>
This class - jv-youtube will always be there before iframe in case of joomla.
Thanks.
I'm working on embedding video to a web-page and am using mediaelements.js. I used following code from the mediaelements.js examples:
<video width="640" height="360" id="player2" poster="img/echo-hereweare.jpg" controls="controls" preload="none">
<source type="video/mp4" src="somevideo.mp4" />
<source type="video/webm" src="somevideo.webm" />
<source type="video/ogg" src="somevideo.ogv" />
<object width="640" height="360" type="application/x-shockwave-flash" data="flash/flashmediaelement.swf">
<param name="movie" value="flash/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=somevideo.mp4" />
<img src="img/echo-hereweare.jpg" width="640" height="360" alt="Here we are"
title="No video playback capabilities" />
</object>
</video>
Then later on comes the script-code from the example:
<script>
$('audio,video').mediaelementplayer({
success: function(player, node) {
$('#' + node.id + '-mode').html('mode: ' + player.pluginType);
}
});
</script>
Then I discovered some strange thing in Firefox. When I'm using this code without starting mediaelements.js (not using the script above), firefox tries to play the .mp4, but naturally the console reports an error that the .mp4 format is not supported. So far so right.
In my understanding, the video element should now try the next format – .webm. Instead the flash fallback gets loaded (flashmediaelement.swf) (nothing gets played so far, as the play-button is not clicked yet, but still the .swf is loaded completely).
Then when I play the video the .webm gets downloaded and played – as expected.
When I use it with mediaelements.js an even weirder thing is happening – the .swf not only gets fully loaded once, but is requested at least one more time, without being downloaded (you see it in firebug's network tab – a yellow line with a busy spinner, as if it would load and load. But there is no error or any status code, nor a filesize displayed. It seems kind of like an "stuck" request. I would like to post a screenshot of it, but am not allowed at the moment.).
Additionaly I get the alert in Firebug's console, that the .webm cannot be decoded. The .webm-video starts loading but won't be loaded fully (status code 206). Then no video plays at all, because the .webm is tried to play but stops because of the decoding error. Shoudn't the flash fallback jump in then?
My questions are now:
Is this normal behaviour in Firefox for media elements – that the
fallback flashplayer gets loaded, even though it is not needed?
Why does it load two or three times in the second scenario
allthough it is not used either? I guess this is a bug in mediaelemnts.js
And third, why does firefox play the .webm without mediaelements.js
and doesn't with mediaelements.js? I guess another bug?
Thx for any help.
---NOTE---
I know I am using the .swf that comes with the mediaelements.js as a fallback solution, even when I am not using mediaelements.js. Does anyone know a simple lightweight flash video player? Or would I have to stick with flowplayer as the standard flash video player?
I can't have multiple versions of all my video files (there's lots and the whole site is downloaded) so I wrote this and it seems to work on current Safari, FireFox and Chrome -should work on everything else or add to the non MP4 list
<script type="text/javascript">
/*U might need to add other non-MP4 native browsers*/
if (navigator.userAgent.indexOf('Firefox'||'Chrome') != -1) {
document.write("<object type='application/x-shockwave-flash' data='player.swf' width='480' height='270'>
<param name='movie' value='player.swf' />
<param name='allowFullScreen' value='true'/>
<param name='wmode' value='transparent' />
<param name='flashVars' value='controlbar=over&file=video/sequence03.mp4' />
<span title='No video playback capabilities, please download the video below'>
<a href='video/sequence03.mp4'>Sequence 03</a></span></object>")
}
else {
document.write("<video width='480' height='270' controls><source src='video/sequence03.mp4' type='video/mp4' /></video>")
}
</script>
Well I'm having a bit of an issue, I have an application that uses DOMDocument to display some content but it is removing some code that is needed for FBML and a Google +1 button to display.
For example, Facebook's like button is <fb:like>, it is removing fb: from the string. Google's +1 button is like <g:plusone> and it's removing g:.
Is there any way to make it not remove that part of the code?
You can solve both issues.
With Facebook like button, you will want to use the HTML5 version. See: https://developers.facebook.com/docs/reference/plugins/like/
ex: <div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
With Google's Plus one you can use the HTML5 version as well. See: https://developers.google.com/+/plugins/+1button/
ex: <div class="g-plusone" data-size="tall" ... ></div>
My brand new job is full of wonderful and awful surprises. one of the most interesting part of this job is the will to enhance, accelerate, make everything scale.
And today, first real problem.
Here's the deal : we get up to 20 list elements, each one of them displaying its own Facebook share, Twitter share, and Facebook Like button.
As you can imagine, 60 iframes opening is just a pain for user experience.
My question : anybody has already been facing such problems, and what would you recommend to upscale these performance issues ?
While I'm thinking of an AddThis implementation, I hope there are other solutions I could consider.
Best way to improve performance is not to copy paste the code from facebook plugins.
Facebook 'Like Button' code looks like:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Issue with this is, if you have 20 like buttons, then 20 Divs are created with id="fb-root" and 20 times the script for all.js is called. Best way is to move the
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
to header of page and whenever you want a like button, only use
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Same goes for facebook comments & other plugins.
Also, foir some plugins facebook provides option to either use xfmbl or iframe code. Always pick the iframe code because facebook's js has to parse all xfbml code and convert to iframe. It causes a lot of DOM insertions and slows down the page.
Hope this helps!