Video problems in mobile view

Hi,

I embedd videos in my articles and want them to fit also into the responsive layout. When I set the video-player to a fixed width and hight, which looks good for the desktop-browser, the video-player appears too large in the mobile layout. The support of the video-player suggested to fix that with specific entries of the player-sizes in the mobile/templates.css. So for testing I did entries of the original video-size in template/tablet.css and this entry in mobile.css:

.jwplayer{width: 256px; height: 144px;}

But now the video doesn't show up on my mobile website anymore (iphone) - although it's embedded. This means that the player doesn't show up, but when I click on the place where it should be, the video starts playing.

Here's a link of the site.

So I have some questions:

1) What would be the perfect way to fit embedded videos into resonsive Layout?
2) Is it possible to do this with the override.css, so I can leave the original csses untouched?
3) I'd like to embedd the video into the "Media-Field", but on the frontend it's displayed at the end of the article. How is it possible to change the position of the "Media-Field" in the article?

Thanks and best regards,

mb

Hi,
ad 1) Read this tips:
http://css-tricks.com/NetMag/FluidWidth ... hVideo.php
http://webdesignerwall.com/tutorials/css-elastic-videos
http://avexdesigns.com/responsive-youtube-embed/

ad 2) yes, if you add css into html in article code

Hi,

thanks for your quick reply.

I forgot to mention, that I embed my videos, which are located on my server, with the "JW Player Plugin Advanced" from Joomlarulez. So with this Plugin the embed-code looks as follows:

{jwplayer}&file=/media/video/toter_hase_langer_ausschnitt.mp4&width=100%&height=100%&class=jwplayer&resizing=true&stretching=fill{/jwplayer}

Here the width and hight is also in percentage. As I read in your links it's the same principle. But it's not that fluid. When I resize my browser-window to test it as suggested in your second link, the size of my player "jumps" to the smaller size of the mobile.css.

But for the desktop-browser I'm fine. The main problem is, that the video-player is still not visible, wenn embedding with css style and percentage-sizing on my mobile - although it's playable. When I embed the player with fixed sizes and without css-style in it's code, it's visible - but too big for the responsive Layout.

Best,

mb

Sorry, generally we don't support others plugins/modules then ours.
Maybe you should to find & use other which is responsive be default , in other case you have to edit & modify source code of jwplayer to add some new features.