YouTube videos too big after template update

I updated Simplicity running on Joomla 3.3.6 to the latest version (v 3.15). Now embedded YouTube videos appear very large. Could someone please tell me how to fix this?

My site URL: www.mondaiji.com

Thank you!

Hi

Looks like it's something comming directly from the videos. Have You added this code to website:

Code: Select all

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


How are the videos added ?

Thank you for the reply. I add the videos by simply pasting the embed code from YouTube into an article.
Here's an example of the code from YouTube:
<iframe width="420" height="315" src="//www.youtube.com/embed/X3N49-AK9jU" frameborder="0" allowfullscreen></iframe>

The preview in Joomla's backend editor looks fine, so I'm guessing it's a CSS override in the Gavick template?

Hi

This turn to be a very big issue. Right now I cannot find a way to make it display in a requested width without removing responsive functionality. Please send me an access to joomla panel. I'll try to play with the code in override. I hope this would give me some ideas.

Thank you for your reply. Unfortunately, the way my site security is structured, admin login from outside my internal network is not possible. Are you able to re-create the issue on a test site?

Hi

I'm afraid not. There is a couple of factors affecting that. In this case please use Akeeba Backup and prepare a copy of Your site for me. Than just send me an url to the package to download.

Hi again.

Would an additional layer around the video be a possible solution ? This is something I know will work, but this is just a workaround.

Code: Select all

<div style="margin: 15px auto; max-width: 400px;">

CODE FOR VIDEO GOES HERE

</div>


Thank you kindly for the workaround and your valuable assistance. I think I'll try this for the time being. Unfortunately, I cannot send a backup of the site as the site owners will not allow it for security / copyright reasons.

I believe I found the code responsible for this issue. It's the file called "fitvids.jquery.js" in the template's js folder. I noticed that the older version of the Simplicity template did not have this file. This must be a recent addition.

Removing this js file resolved the issue. I'll poke around the code for a more elegant solution.

Commenting out line 25 in fitvids.jquery.js resolved the issue.

Code: Select all

// var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';

Hi

Good thinking. Unfortunately this is not out library, but a standard video plugin for jQuery so we cannot comment it in our templates, but I'll report this to its developer. Thank You for help.

Hi teitbite,
No news?
I tried to comment line 25: video have now the good width but pictures are no more shown in Virtuemart product details and some other pages.

Hi

No news. I put the information in their ticket system but received no answer, so can't tell if they processed it or not. Please show me the example of the page You have no images displayed.