You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

  1. jeffreywhunter
  2. JCE Editor
  3. Thursday, 04 May 2017
I want a video to be responsive, resize with the browser and on mobile respond to turning the phone sideways and playing full screen.

I've found this code onsite.

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


Is this correct direction? Are there better instructions on how to set that up somewhere?
Accepted Answer Pending Moderation
I made a simple Joomla plugin to do this - https://github.com/widgetfactory/wf_responsive_widgets
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 1
Accepted Answer Pending Moderation
Hi thanks for this plugin, I have installed and enabled it on my site but it does not appear to do anything. when I view this page:

https://www.pinpoint-media.global/about-pinpointmedia/the-story

on a browser it looks fine the video is full width and height. But when I view on a phone it is still the same height as it would eb on the desktop creating a lot of white space above and below the video?

Is there anyway to resolve this?

Thanks

Lee
  1. more than a month ago
  2. JCE Editor
  3. # 2
Accepted Answer Pending Moderation
https://www.pinpoint-media.global/about-pinpointmedia/the-story

on a browser it looks fine the video is full width and height. But when I view on a phone it is still the same height as it would eb on the desktop creating a lot of white space above and below the video?


This looks fine to me in the Firefox Responsive Design view, and on my iPhone.
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 3
Accepted Answer Pending Moderation
Ryan,
Thanks, it must have been my cache as it is now displaying correctly.
  1. more than a month ago
  2. JCE Editor
  3. # 4
Accepted Answer Pending Moderation
Hi Ryan,

Seems it working fine in articles but not in my modules. Am I missing something?
  1. more than a month ago
  2. JCE Editor
  3. # 5
Accepted Answer Pending Moderation
Make sure the Prepare Content option in the Module parameters is set to Yes.

https://cdn.joomlacontenteditor.net/tmp/91659-how-to-setup-a-responsive-video-player-using-jce-media-player.jpg
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  1. more than a month ago
  2. JCE Editor
  3. # 6
Accepted Answer Pending Moderation
Make sure the Prepare Content option in the Module parameters is set to Yes.

https://cdn.joomlacontenteditor.net/tmp/91659-how-to-setup-a-responsive-video-player-using-jce-media-player.jpg


Stupid me :p

Thanks Ryan, awesome plugin. SO I can cleanup my css now ;)


/* responsive video and images*/

img,
embed,
object,
video,
iframe {
max-width: 100%
}

iframe {
border: none
}

//.video-container,.custom.video p {
// position: relative;
// padding-bottom: 56.25%;
// padding-top: 30px;
// height: 0;
// overflow: hidden;
// margin-bottom: 15px
//}
//
//.video-container iframe,
//.video-container object,
//.video-container embed,
//.video-container video,
//.video iframe {
// height: 100%;
// left: 0;
// position: absolute;
// top: 0;
// width: 100%;
// border: 0 none;
//}

//.video iframe {
// height: 100%;
// left: 0;
// //position: absolute; HIERBOVEN WEGHALEN ????
// padding-bottom: 56.25%;
// top: 0;
// width: 100%;
// border: 0 none;
//}
  1. more than a month ago
  2. JCE Editor
  3. # 7
Accepted Answer Pending Moderation
Tested and working on joomla 3.8.12 - template ja-purity III, T3 framework.

Ryan, I really think it should be integrated into jce!

Thanks
  1. more than a month ago
  2. JCE Editor
  3. # 8
Accepted Answer Pending Moderation
Thank you for this plugin!
  1. 2 weeks ago
  2. JCE Editor
  3. # 9
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.