Page 1 of 2
Help making iframe embedded videos responsive
Posted: Sun Mar 22, 2015 4:08 pm
by Twisted7
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>
Thanks
Re: Help making iframe embedded videos responsive
Posted: Sun Mar 22, 2015 4:38 pm
by yodapt
Re: Help making iframe embedded videos responsive
Posted: Sun Mar 22, 2015 4:45 pm
by Twisted7
Thanks yodapt
where do i apply this code?
Re: Help making iframe embedded videos responsive
Posted: Sun Mar 22, 2015 11:28 pm
by viethemes
You can add that code on my own extension
Custom CSS. It is not lost when you upgrade OpenCart.
Re: Help making iframe embedded videos responsive
Posted: Tue Mar 24, 2015 7:59 pm
by Twisted7
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
Re: Help making iframe embedded videos responsive
Posted: Tue Mar 24, 2015 8:40 pm
by viethemes
You can upload the extension file to the folder system and go to admin > Extensions > Modifications > click on the Refresh button to rebuild modifications.
Re: Help making iframe embedded videos responsive
Posted: Tue Mar 24, 2015 9:51 pm
by Twisted7
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?
Re: Help making iframe embedded videos responsive
Posted: Tue Mar 24, 2015 10:01 pm
by Twisted7
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
Re: Help making iframe embedded videos responsive
Posted: Tue Mar 24, 2015 10:41 pm
by viethemes
You should set permission 775 for the folder system/modification to solve it.
Re: Help making iframe embedded videos responsive
Posted: Tue Mar 24, 2015 11:29 pm
by Twisted7
viethemes wrote:You should set permission 775 for the folder system/modification to solve it.
that did not work, same issues
Re: Help making iframe embedded videos responsive
Posted: Thu Mar 26, 2015 10:44 am
by viethemes
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?
Re: Help making iframe embedded videos responsive
Posted: Fri Mar 27, 2015 6:43 pm
by Twisted7
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
Re: Help making iframe embedded videos responsive
Posted: Mon Mar 30, 2015 5:46 pm
by Twisted7
I have now managed to get the [OCMOD] Custom CSS by viethemes installed and have applied the code mentioned:
Unfortunately the video reviews i'm trying to make responsive still don't resize.
Can anyone help please?
Re: Help making iframe embedded videos responsive
Posted: Sun May 10, 2015 2:22 am
by skip
Where to insert this code directly in css and how to define height ?
thanks
Re: Help making iframe embedded videos responsive
Posted: Mon May 11, 2015 11:56 pm
by viethemes
skip wrote:
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>
Re: Help making iframe embedded videos responsive
Posted: Tue May 12, 2015 6:24 am
by skip
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
Re: Help making iframe embedded videos responsive
Posted: Tue May 12, 2015 11:11 pm
by viethemes
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?
Re: Help making iframe embedded videos responsive
Posted: Wed Jul 22, 2015 7:10 pm
by JanMeme
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.
Re: Help making iframe embedded videos responsive
Posted: Wed Nov 18, 2015 7:35 pm
by vimal_beeshop
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;
}
}
Re: Help making iframe embedded videos responsive
Posted: Sat Mar 12, 2016 6:26 pm
by MariOiraM
For anybody else who is struggling with responsive videos from youtube, what @vimal_beeshop copied, works perfectly!