Post by Twisted7 » Sun Mar 22, 2015 4:08 pm

I have just upgraded to 2.0.1.1 and some of my products have video reviews that i have embedded a youtube video of. The problem being that the video does not resize, so when viewed on a mobile device the video breaks out of the desired area.

How can i make these videos resize with everything else?

current code used

Code: Select all

<iframe src="//www.youtube.com/embed/Dry3cScZilc" width="640" height="360" frameborder="0"></iframe>
<br><p></p>
http://twisted7sauces.com/Chilli-Sauces ... The-Monkey

Thanks

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by yodapt » Sun Mar 22, 2015 4:38 pm

Code: Select all

iframe {
        max-width: 100%;
}

Opencart Developer - My Extension Showcase
Contact me at aeon.yoda@gmail.com


User avatar
Active Member

Posts

Joined
Fri Jun 17, 2011 6:39 pm


Post by Twisted7 » Sun Mar 22, 2015 4:45 pm

Thanks yodapt
yodapt wrote:

Code: Select all

iframe {
 max-width: 100%;
}
where do i apply this code?

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by viethemes » Sun Mar 22, 2015 11:28 pm

You can add that code on my own extension Custom CSS. It is not lost when you upgrade OpenCart.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by Twisted7 » Tue Mar 24, 2015 7:59 pm

viethemes wrote:You can add that code on my own extension Custom CSS. It is not lost when you upgrade OpenCart.
How can i install your extension without using the extension installer as mine doesn't work and Opencart will not get back to me with a solution.
Thanks

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by viethemes » Tue Mar 24, 2015 8:40 pm

You can upload the extension file to the folder system and go to admin > Extensions > Modifications > click on the Refresh button to rebuild modifications.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by Twisted7 » Tue Mar 24, 2015 9:51 pm

viethemes wrote:You can upload the extension file to the folder system and go to admin > Extensions > Modifications > click on the Refresh button to rebuild modifications.
which folder location?

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by Twisted7 » Tue Mar 24, 2015 10:01 pm

Also using the admin > Extensions > Modifications > Refresh button throws back the following error:

Code: Select all

Warning: fopen( public_html/system/modification/system/engine/action.php) [function.fopen]: failed to open stream: No such file or directory in /home/twiste30/public_html/admin/controller/extension/modification.php on line 651Warning: fwrite() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 653Warning: fclose() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 655Warning: fopen( public_html/system/modification/system/engine/loader.php) [function.fopen]: failed to open stream: No such file or directory in /home/twiste30/public_html/admin/controller/extension/modification.php on line 651Warning: fwrite() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 653Warning: fclose() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 655Warning: fopen( public_html/system/modification/system/library/config.php) [function.fopen]: failed to open stream: No such file or directory in /home/twiste30/public_html/admin/controller/extension/modification.php on line 651Warning: fwrite() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 653Warning: fclose() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 655Warning: fopen( public_html/system/modification/system/library/language.php) [function.fopen]: failed to open stream: No such file or directory in /home/twiste30/public_html/admin/controller/extension/modification.php on line 651Warning: fwrite() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 653Warning: fclose() expects parameter 1 to be resource, boolean given in /home/twiste30/public_html/admin/controller/extension/modification.php on line 655Warning: Cannot modify header information - headers already sent by (output started at /home/twiste30/public_html/admin/index.php:84) in /home/twiste30/public_html/system/library/response.php on line 12

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by viethemes » Tue Mar 24, 2015 10:41 pm

You should set permission 775 for the folder system/modification to solve it.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by Twisted7 » Tue Mar 24, 2015 11:29 pm

viethemes wrote:You should set permission 775 for the folder system/modification to solve it.
that did not work, same issues

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by viethemes » Thu Mar 26, 2015 10:44 am

Could you provide your site url, a admin account and a FTP account via PM, so I can take a look at the problem closer?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by Twisted7 » Fri Mar 27, 2015 6:43 pm

viethemes wrote:Could you provide your site url, a admin account and a FTP account via PM, so I can take a look at the problem closer?
Pm'd details.

Thanks

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by Twisted7 » Mon Mar 30, 2015 5:46 pm

I have now managed to get the [OCMOD] Custom CSS by viethemes installed and have applied the code mentioned:
yodapt wrote:

Code: Select all

iframe {
 max-width: 100%;
}
Unfortunately the video reviews i'm trying to make responsive still don't resize.

Can anyone help please?

New member

Posts

Joined
Fri Nov 08, 2013 8:37 pm

Post by skip » Sun May 10, 2015 2:22 am

yodapt wrote:

Code: Select all

iframe {
        max-width: 100%;
}
Where to insert this code directly in css and how to define height ?
thanks

Active Member

Posts

Joined
Mon May 09, 2011 9:57 pm

Post by viethemes » Mon May 11, 2015 11:56 pm

skip wrote:
yodapt wrote:

Code: Select all

iframe {
        max-width: 100%;
}
Where to insert this code directly in css and how to define height ?
thanks
You can insert at the end of file catalog\view\theme\default\stylesheet\stylesheet.css,
the height is defined here:
<iframe height="300" src=".."></iframe>

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by skip » Tue May 12, 2015 6:24 am

Thank you
But height inside iframe tag is only for desktop version
<iframe height="300" src=".."></iframe>

If I got for exampe:
<iframe width="853" height="480" src="https://www.youtube.com/embed/0eJZB217d-8" frameborder="0" allowfullscreen></iframe>

and use in css
iframe {
max-width: 100%;
}

Then my video on mobile version got width app. 360px and height 480px that is not look naturaly. I think there must be way for auto resize height in responsive view

Active Member

Posts

Joined
Mon May 09, 2011 9:57 pm

Post by viethemes » Tue May 12, 2015 11:11 pm

skip wrote:Thank you
But height inside iframe tag is only for desktop version
<iframe height="300" src=".."></iframe>

If I got for exampe:
<iframe width="853" height="480" src="https://www.youtube.com/embed/0eJZB217d-8" frameborder="0" allowfullscreen></iframe>

and use in css
iframe {
max-width: 100%;
}

Then my video on mobile version got width app. 360px and height 480px that is not look naturaly. I think there must be way for auto resize height in responsive view
Which size do you want to resize in mobile?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by JanMeme » Wed Jul 22, 2015 7:10 pm

Resize your browser till you have the layout for mobile. Then look with a browser-extension like „firebug“ for firefox to identify the css which is loaded. It’s possible that you have a separated css for mobile. When you identify the css file, download and open it in text editor. Paste the code into.

Code: Select all

iframe {
width: 100%; 
height: auto;
}
When you have only one css you must look at the media query.
Like @media …..
Past the iframe-code into the brackets for the media query which is for mobile. Then test your website in browser.

Newbie

Posts

Joined
Wed Jul 22, 2015 6:33 pm

Post by vimal_beeshop » Wed Nov 18, 2015 7:35 pm

Try this. Just add this code at the bottom of your CSS file. Tested it on iphone 6 and it looks nice.

Code: Select all

/* Youtube video mobile */
@media (max-width: 750px) {
iframe {
 max-width: 100%;
 height: 165px;
}
}
@media (min-width: 768px) {
iframe {
 max-width: 100%;
 height: 250px;
}
}
@media (min-width: 992px) {
iframe {
 max-width: 100%;
 height: 335px;
}
}
@media (min-width: 1200px) {
iframe {
 max-width: 100%;
 height: 360px;
}
}

Newbie

Posts

Joined
Wed Nov 18, 2015 7:33 pm

Post by MariOiraM » Sat Mar 12, 2016 6:26 pm

For anybody else who is struggling with responsive videos from youtube, what @vimal_beeshop copied, works perfectly!

Unior orodje | Makita orodje| Dewalt orodje


New member

Posts

Joined
Sun Apr 19, 2015 12:40 am

Who is online

Users browsing this forum: No registered users and 4 guests