I've been researching ways to make JW player 5 responsive and have tried both CSS/HTML and jQuery examples to modify the video player, but haven't had any success. I'm using WordPress and am trying to add the code to the page using a raw .js module and page-specific css, if that makes a difference.
Here is the code:
<script type="text/javascript" src="http://www.360north.org/jwplayer5.9/jwplayer.js"></script>
<video id="mediaplayer" width="100%" height="100%" src="http://state.ak.tvwmedia.net:1935/ktoo-live/_definst_/360north/playlist.m3u8" type="video/mp4"></video>
<script type="text/javascript">
// <![CDATA[
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '640',
'height': '480',
'image': 'http://www.360north.org/wp-content/uploads/2014/04/SmallVideoPlayer1.jpg',
'modes': [{
type: "flash",
src: "http://www.360north.org/jwplayer5.9/player.swf",
config: {
file: "360north",
streamer: "rtmp://state.ak.tvwmedia.net/ktoo-live",
provider: "rtmp"
}
}, {
type: 'html5',
config: {
'file': 'http://state.ak.tvwmedia.net:1935/ktoo-live/_definst_/360north/playlist.m3u8',
'provider': 'video'
}
}]
});
// ]]>
This method can be used for the JW Player - http://webdesignerwall.com/tutorials/css-elastic-videos
Basically, the iframe method - "Elastic Object & Iframe Embedded Videos"
http://webdesignerwall.com/demo/elastic-videos/
This method works with JW5.
Here is another way to make JWplayer 5 responsive, without an iFrame, but you must add code tags around the embedding code or it won't work:
http://www.miracletutorials.com/how-to-make-jw-player-5-10-responsive/
I hope this helps?
Related
In my solution I'm using Nuxt-Img that returns resized images according to the current resolution.
But with the img-Tag it's quite hard/dirty to work with e.g. adding linear-gradient or focussing the image having overlays etc.
With a background-image it would be quite easier but it seems that nuxt-img doesn't support resizing for background-images.
Update
Trying the following nuxt-image approach, the image size doesn't changes and is reloading the page always 418kb:
<script>
export default {
name: "SectionServices",
props: {
services: {
type: Array,
required: true,
},
},
computed: {
servicesVal() {
return this.services.map((service) => {
return {
src: this.$img(service.src, {
sizes: "xs:400px sm:640px md:768px lg:70vw xl:70vw xxl:70vw",
}),
alt: service.alt,
name: service.name,
link: service.link,
};
});
},
},
};
</script>
So is there any great advise how to handle that?
What is your recommendation? Using nuxt-img or is it better to work with background-image?
Using Background-image, how can I handle the image-size that I don't need to load large images for e.g. mobile phones?
Currently I'm having issues with Twitch's iframe stream video. When I select full screen, the z-index is no longer active. It is hidden under an iframe. Please guide everyone how to fix. Thanks for reading.
https://codepen.io/pobby/pen/bKbNZo
<div id="twitch-embed">
<div class="cr_display_logo">TEST</div></div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<script type="text/javascript">
var embed = new Twitch.Embed("twitch-embed", {
width: 854,
height: 480,
channel: "tonyteo2018",
layout: "video",
autoplay: false
});
embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
var player = embed.getPlayer();
player.play();
});
</script>
I am getting the error: "Uncaught referenceError: App is not defined" in my JS console when loading this Enyo app on my localhost. I am brand new to Enyo so I am still trying to learn the concepts of kinds and components.
app.js (in source folder):
enyo.kind({
name: "App",
kind: "FittableRows",
classes: "enyo-fit enyo-unselectable",
components: [
{
kind: "onyx.Toolbar",
layoutKind:"FittableColumnsLayout",
components: [
{
kind:onyx.Button,
style:"width:80px;background:green;",
ontap:"handleBtnBack",
content:"Back"
},
{
content:"Header",
style:"text-align:center;",
fit:true
},
{
kind:onyx.Button,
style:"width:80px;background:red;",
ontap:"handleBtnNext",
content:"Next"
}
]
},
{
kind: "Scroller",
horizontal:"hidden",
touch:true,
fit:true,
thumb:true,
components:[
{
tag:"h1",
//This is how we insert css class.
classes:"padding15px",
content:"This is content area...Hello World!!!"
}
]
},
{
kind: "onyx.Toolbar",
// The footer
layoutKind:"FittableColumnsLayout",
components:[
{
kind:"onyx.Button",
content:"Go Next Page",
ontap:"handleBtnNextPage",
fit:true
}
]
}
],
create: function(){
this.inherited(arguments);
console.log("App is created in memory");
},
rendered : function(){
this.inherited(arguments);
console.log("App is created in rendered into DOM");
},
handleBtnNextPage : function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnNext: function(inSender,inEvent){
new Page2().renderInto(document.body);
},
handleBtnBack: function(inSender,inEvent){
//For each enyo event handler comes with inSender, the control that sends the event and the inEvent the actual event itself.
alert("Back Button");
}
});
package.js (in source folder):
enyo.depends(
// Layout library
"$lib/layout",
// Onyx UI library
"$lib/onyx", // To theme Onyx using Theme.less, change this line to $lib/onyx/source,
//"Theme.less", // uncomment this line, and follow the steps described in Theme.less
// CSS/LESS style files
"../assets/css/app.css",
// Include our default entry point
"App.js",
"Page2.js"
);
index.html (in root folder):
<!--My Copy-->
<!DOCTYPE html>
<html>
<head>
<title>IsGoodStuff.com Tutorial #2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="shortcut icon" href="assets/favicon.ico"/>
<script src="enyo/enyo.js" type="text/javascript"></script>
<!-- -->
<script src="package.js" type="text/javascript"> </script>
</head>
<body>
<script type="text/javascript">
new App().renderInto(document.body);
</script>
</body>
</html>
If your index.html is in your root folder, but the main package.js is in the source folder, it's probably your script tag that loads package.js. Try:
<script src="source/package.js" type="text/javascript"> </script>
You haven't supplied Page2 but it appears the code would work as-is.
Here's a fiddle showing the working page: http://jsfiddle.net/kgxvg7Lw/1/
Some thoughts:
1) Are you using a case-sensitive file system? You show app.js but your package.js has App.js (capitalized).
2) Are you certain there are no parse errors in the console?
Now, that said... You probably don't want to reload a new app for every 'page' switch. Usually, you would use something like Panels to allow the app to control the content that appears on the screen and just navigate among the panels as needed.
I am trying to include a caption on the actual webpage under the image while using the magnificence popup gallery. Using a div and class caption or carousel-caption, I am unable to do so without the images in the gallery stacking vertically one by one. How can I do this?
<a href="img/base/ggg.PNG" title="HELLO" class="chicken">
<img src="img/base/pop.PNG" alt="remember your alt tag" />
</a>
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true}
// other options here
// end each line (except the last) with a comma
});
});
js fiddle: https://jsfiddle.net/sb4btox7/
Since I don't yet have enough reputation points to comment, I'm commenting here, in addition to providing a solution.
Comment: JSFiddle isn't working with your http:// images because JSFiddle is trying to serve them from https://
Solution:
You are halfway there. There are 2 parts to making the captions work.
You correctly have put the link in the anchor tag and not the
image tag
You must specify your title source in your
initialization script like this.
$(document).ready(function() {
$('.chicken').magnificPopup({
type: 'image',
gallery:{enabled:true},
type: 'image',
image: {
titleSrc: 'title'
// this tells the script which attribute has your caption
}
});
});
The script then automatically writes your caption to its div labeled class="mfp-title"
BONUS Solution: I needed my lightbox image to open in a new window for users on their phones to zoom in, so I added this after the first titleSrc declaration:
titleSrc: 'title',
titleSrc: function(item) {
return '' + item.el.attr('title') + '';
}
This information is in the documentation: http://dimsemenov.com/plugins/magnific-popup/documentation.html in the "Image Type" section
I tried to use the selected answer, but even using the documentation, the examples wouldn't work for me. What I ended up using was:
$('.elements').magnificPopup({
type: 'image',
gallery: {
enabled: true
},
image: {
titleSrc: function(item) {
return item.el.find('img').attr('title');
}
}
});
This probably has something to do with the version I was using, but it wasn't clear what version the documentation was for. Hopefully this is useful to someone.
I'm trying to load an outside webpage in an iframe in my sencha touch app. The webpage is of dynamic height so I need the iframe to be scrollable within the sencha touch app. I have been able to get the page to scroll, but the underlying iframe does not render any of the web content below the initial viewport. Here is my code. Does anybody have any ideas?
App.views.Help = Ext.extend(App.views.Base, {
title: 'Help',
mainLevel: 10,
subLevel: 1,
backButton: 'dashboard',
forceTab: App.OTHER_TAB,
forceSideTab: App.HELP_TAB,
layout: 'fit',
bodyPadding: 0,
items: [{
xtype: 'panel',
scroll: 'both',
items: [{
id: 'iframe',
layout: 'vbox',
width: '100%',
height: '2000px',
html: [
'<div style="width:100%;height:2000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div>',
'<iframe style="position:fixed;top:0;left:0;float:left;z-index:1;" width="100%" height="2000px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>'
]
}]
}]
/* OLD attempts
html: '<iframe style="overflow-y: scroll; -webkit-overflow-scrolling: touch" width="1000px" height="1200px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>'
html: '<div style="overflow-y: scroll; -webkit-overflow-scrolling: touch"><iframe width="1000px" height="1000px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe> </div>'
*/
});
Ah, a familiar problem. After trying and trying for ages, I've figured this one out. Here's a link to the blog post I made to help solve this for everyone else (and myself
Tech-Talk-Tone : Scrolling External Webpages in Sencha Touch with iFrames & More
Here's the fix ::
Ext.Ajax.request({
url: ‘your/external/web/page/url.html’,
success: function(response, opts) {
Ext.getCmp(‘YourPanelId’).update(response.responseText);
}
});
To make this work for external links, you need to enable either Cross Domain or Cross Browser Ajax requests on the server that you host the app on (or Phonegap). Once you do that, it works fine :)