This worked!!! One thing to note for amateurs like me, you have to look for the section in the CSS code which mentions video, and then past the copy there.
I have watched and tried several video tips on this subject. Yours is the first to actually work! The others made my video responsive, but the video inside the frame was blown up too big causing the thumbnail pic from YT to get cut off weird on the sides. Your code didn't do that. The videos look great on desktops and mobile. Yay! Oh my goodness, I am so happy. Thank you!
I celebrated too soon. The same issue is happening again. I didn't change anything, so it must be a code in my theme. Any thoughts as to how to stop this from happening?
I was trying to make a map responsive on our website and nothing was working! I finally found your video after trying three other peoples methods and within 5 minutes my map is fixed! Thank you so much, I appreciate it!
I just saw your video and wanted to say Thanks! Your enthusiasm and desire to help others really comes through in your video. Your explanations are clear and to the point. Thanks for "nerding out" with us.
I watch a lot of a videos on youtube a some are helpful but others are a waste of time, especially for beginners. You my love are a wonderful person. Nice, quick and easy explanation and very helpful with the links. God bless your soul.
Hi Kori, I have a problem with an in wordpress, I accept any suggestion. I have a form inside the , the form is html, js and php code. When the form runs it works fine, but I need the thank you screen to pop the and go to the thank you page. I don't want the thank you page to be inside the . That's the problem.
Hey Luis - I wish I was more of a developer to help you with this. That's definitely not my strong knowledge. Perhaps reach out to the theme builders you're working with.
Hey Kori! Hi from Turkey. Hope u are doing well. So, now I did put my flask website as in wordpress. Sadly, the size is not enough. I want to bypass the size limit in wordpress. See cause I have an album. Then I want to implement your video into my album flask so even if the user makes it smaller page it will be smaller. I found many things on the web, but noone says where to put the Js code etc. can you please tell me where should I put my js code? Iframe has a size limit. So you cannot put a whole page in wordpress
I couldn't remember the title to the vid (which is super helpful) so search for "wordpress resize ellen degeneres" and guess who was number one! Thanks Kori - I won't forget your name again.
+WebTegrity anyway,thank you very much.I just want to make my multilingual sites(Chinese and English language)and I solved my question last night by using the Polylang plugin.
Hello, Thank you for the great video, I have tried so many things to get cdbaby's to be responsive and I can't seem to get it to respond in portrait mode. Any Ideas?
This is perfect! Just what I needed, thanks! ..though one followup, my is not expanding to the height of the content. Did I do something wrong or is there something else I have to add to fix that?
Hey Kori, First I love your videos! You've taught me so much, this channel is a go to! Same with your plugins! Second, this method has made my responsive on laptop. But when viewing my page on mobile (iPhone) it is not. The way it looks on mobile is like a cropped image. I seen Safari iOS tends to void the css code based on different factors, but it also looks the same on my phone's Chrome. Any ideas? Can you point me in a direction that might solve this problem?
I guess I should say, I'm using a WordPress site (HTML code) and I'm trying to embed other websites on the link with a scroll, targeted using the tag to an .
Kori thanks for the hepful video. i done this process on one website and evrything works great but when i repeat on another something does not work. Can you guess what could be the problem :) thanks
@@KoriAshton i also think it was cache because it start to work when i clear cache and reset my computer. two my best moves in coding :) anyway Kori you help me a lot . Thanks
I'm using the Divi Builder and unfortunately this doesn't work for me. I've put it in the style.css in the child theme then tried it in the custom CSS area within the theme. I'm sure it's the theme but if you have any other ideas, I'd love to know! Thanks!
Yes. It's up to date. I suspect it may have something to do with the short codes of the modules within the theme. I created the post without using the builder even though I'm trying to avoid using the builder. Make the site slower. I went back and used the builder and was able to get it working. I think it's a theme thing. Looking forward to more of your videos and helpful tips in the future! Thanks for responding so quickly!
Hi, and thanks for this tut. I have, like you, googled extensively for a solution to responsive s. I also came across the same site that you talk of. I use child themes a lot (and the theme I'm on has no custom CSS field) so I tend to bung CSS, functions, header etc in the child. This fix *doesn't work for me*. :-( Ok I have had to change the padding ratio from 16:9 to 4:3 (56.25% to 75% padding) for my show that is hosted by *Photobucket* and where I store my photos. But there is presumably some other CSS that is interfering. Also - if the width and height attributes are left in the then there is no resizing. When I take them out I get the default tiny player (which would be fine for telephone but sucks on a big screen). I now have bruises on my forehead. Any ideas?
Hi Yes I think it's a theme conflict. :-( Yes I could change the theme but my site has 80 odd pages and posts and those are repeated in spanish. Total 160 entries approx, tons of images etc. It's probably easier to struggle with the CSS than rewrite the child theme's CSS again to fit a new theme. That said, I'm now experimenting with responsive columns and it _seems_ that I may have solved the problem by adding a class to the columns. Thanks for the reply though.
Well you're cool but I was looking for the other way around that is not embedding in my web and make it responsive (which still wouldn't be possible your way if the has inline style width fixed) but was looking for generating responsive code for others webs which shows some content from my web
No I didn't want to pull data in my website, well let me clarify it to you in parts, to break it i. I have a website say, "www.embedfrom.com" which has say, some maps functionality and I like to share that map functionality with other developers by providing them with embed codes like we would on TH-cam (I put embed code of your video below) ii. But if you check that embed code you'll find that given has fixed width and if a developer say Dev1 copies it to her website it's not responsive unless she makes some changes to the embed code i.e. change width iii. So what I'm looking for is without having Dev1 to do anything except copy/paste the embed code is it possible to make it responsive embed code for your video (won't show up properly due to input sanitization): @@KoriAshton
Ah! You're looking to create code for others that is already responsive. Okay - see if this CSS helps you create that. They may have to reference this in their CSS too - but it would solve it blog.theodo.fr/2018/01/responsive-s-css-trick/
Thanks Kori that's really good one article it's still addressing in same way but the article is really good, I appreciate your hunting :) do you just do Wordpress or you're into world of JavaScript as well ?@@KoriAshton
Thankfully I have a team around me that can do Javascript. WebTegrity is my company and I've hired many developers who are way more advanced at code than me :)
Thank you so much, this works perfectly, I really appreciate your help, only I needed to turn padding-top: to 0px to fix the black edges, I'll try to explain this to my subscribers as well.
Hello from Marseille, France ... thank you so much for you great videos. This one in particlular was REALLY helpful. Without your video, I was considering going for a paid option. I did have one unresolved issue though: Although your solution dealt with the correct sizing of an / external link on my site mw-com.fr/en/home so that it's correctly displayed on all devices, on iPad (and I'm guessing maybe on other iOS devices), I have neither a scroll bar, nor an ability to "finger scroll". Can you suggest a solution? Many thanks in advance for any assistance. Kind regards.
Thank you so much for this video. I know that it is old, but let me tell you; I had been looking over my #nerdcode LOL and could not for the life of me figure out why my wasn't responsive on ios. Turns out I had an extra
Don't we have a Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website? plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
Don't we have an Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website? Plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
Don't we have an Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website? Plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
![Import Google Sheets To WordPress [Auto Sync]](/img/n.gif)
Oh my gosh thank you so much. HA I am a rookie web designer and had NOOOOO idea you had to input codes in to text rather than visual! Got it to work.
Glad it worked!
This worked!!! One thing to note for amateurs like me, you have to look for the section in the CSS code which mentions video, and then past the copy there.
You are freaking amazing!!! I was looking for this tutorial all over the internet and I found YOU, Kori! XO
I'm a new subscriber now!
Thank you!!! 🎉🎉🤩
I have watched and tried several video tips on this subject. Yours is the first to actually work! The others made my video responsive, but the video inside the frame was blown up too big causing the thumbnail pic from YT to get cut off weird on the sides. Your code didn't do that. The videos look great on desktops and mobile. Yay! Oh my goodness, I am so happy. Thank you!
I celebrated too soon. The same issue is happening again. I didn't change anything, so it must be a code in my theme. Any thoughts as to how to stop this from happening?
I was trying to make a map responsive on our website and nothing was working! I finally found your video after trying three other peoples methods and within 5 minutes my map is fixed! Thank you so much, I appreciate it!
HECK YES!!! Awesome - glad it worked for you. And thank you for taking a moment to give positive feedback :)
Awesome!
I have some issue, in my custom theme, any embeds don't show up in post content. What i'm missing?
Thank you.
Nice idea, haven't thought about it. I think I have some visual editing plugins on.
I just saw your video and wanted to say Thanks! Your enthusiasm and desire to help others really comes through in your video. Your explanations are clear and to the point. Thanks for "nerding out" with us.
I watch a lot of a videos on youtube a some are helpful but others are a waste of time, especially for beginners. You my love are a wonderful person. Nice, quick and easy explanation and very helpful with the links.
God bless your soul.
You helped us fix an issue we struggled with for too long. Grateful.
Hi Kori, I have a problem with an in wordpress, I accept any suggestion. I have a form inside the , the form is html, js and php code. When the form runs it works fine, but I need the thank you screen to pop the and go to the thank you page. I don't want the thank you page to be inside the . That's the problem.
Hey Luis - I wish I was more of a developer to help you with this. That's definitely not my strong knowledge. Perhaps reach out to the theme builders you're working with.
Hey Kori! Hi from Turkey. Hope u are doing well. So, now I did put my flask website as in wordpress. Sadly, the size is not enough. I want to bypass the size limit in wordpress. See cause I have an album. Then I want to implement your video into my album flask so even if the user makes it smaller page it will be smaller. I found many things on the web, but noone says where to put the Js code etc. can you please tell me where should I put my js code?
Iframe has a size limit. So you cannot put a whole page in wordpress
Sounds like you may be limited on your theme. Have you tried using a "blank" page template to use for your ? th-cam.com/video/OFv2JV9aRHs/w-d-xo.html
I couldn't remember the title to the vid (which is super helpful) so search for "wordpress resize ellen degeneres" and guess who was number one! Thanks Kori - I won't forget your name again.
Blahahahahahaa! You're fantastic!
You are a good teacher.And i want to know do you have a video about how to build Multilingual Sites in the WordPress..thank you
+WebTegrity anyway,thank you very much.I just want to make my multilingual sites(Chinese and English language)and I solved my question last night by using the Polylang plugin.
Hello, Thank you for the great video, I have tried so many things to get cdbaby's to be responsive and I can't seem to get it to respond in portrait mode. Any Ideas?
Why do you use wistia and not youtube for that videos or even not jw player / hosting service?
Hi, i try to get a link to a booking company responsive, by the way you do it, but it wont works, did you know why this wont works?
This is perfect! Just what I needed, thanks!
..though one followup, my is not expanding to the height of the content. Did I do something wrong or is there something else I have to add to fix that?
Hey Kori, First I love your videos! You've taught me so much, this channel is a go to! Same with your plugins!
Second, this method has made my responsive on laptop. But when viewing my page on mobile (iPhone) it is not. The way it looks on mobile is like a cropped image. I seen Safari iOS tends to void the css code based on different factors, but it also looks the same on my phone's Chrome.
Any ideas? Can you point me in a direction that might solve this problem?
I guess I should say, I'm using a WordPress site (HTML code) and I'm trying to embed other websites on the link with a scroll, targeted using the tag to an .
Thanks for leaving a kind comment. Seems like we missed it in all of the threads. Sorry about that. Please reach back out if we can ever help.
Kori thanks for the hepful video. i done this process on one website and evrything works great but when i repeat on another something does not work. Can you guess what could be the problem :) thanks
That could be a conflict with a theme or plugin on the other website. Can you trouble shoot it by testing it with another theme?
@@KoriAshton Thank you for answering. i just repeated couple times more and it finaly works :) dont now what was the issue
@@milosvukovic4935 Sometimes it may be just the cache on the website.
@@KoriAshton i also think it was cache because it start to work when i clear cache and reset my computer. two my best moves in coding :) anyway Kori you help me a lot . Thanks
I'm using the Divi Builder and unfortunately this doesn't work for me. I've put it in the style.css in the child theme then tried it in the custom CSS area within the theme. I'm sure it's the theme but if you have any other ideas, I'd love to know! Thanks!
Yes. It's up to date. I suspect it may have something to do with the short codes of the modules within the theme. I created the post without using the builder even though I'm trying to avoid using the builder. Make the site slower. I went back and used the builder and was able to get it working. I think it's a theme thing. Looking forward to more of your videos and helpful tips in the future! Thanks for responding so quickly!
Worked Perfectly! Genius!
Glad I could help! :) Thanks for the kind words!
it would be much easier if you added the code in description
Thanks for leaving a kind comment. Seems like we missed it in all of the threads. Sorry about that. Please reach back out if we can ever help.
Hi, and thanks for this tut.
I have, like you, googled extensively for a solution to responsive s. I also came across the same site that you talk of.
I use child themes a lot (and the theme I'm on has no custom CSS field) so I tend to bung CSS, functions, header etc in the child.
This fix *doesn't work for me*. :-(
Ok I have had to change the padding ratio from 16:9 to 4:3 (56.25% to 75% padding) for my show that is hosted by *Photobucket* and where I store my photos.
But there is presumably some other CSS that is interfering.
Also - if the width and height attributes are left in the then there is no resizing. When I take them out I get the default tiny player (which would be fine for telephone but sucks on a big screen).
I now have bruises on my forehead.
Any ideas?
Hi
Yes I think it's a theme conflict. :-(
Yes I could change the theme but my site has 80 odd pages and posts and those are repeated in spanish. Total 160 entries approx, tons of images etc.
It's probably easier to struggle with the CSS than rewrite the child theme's CSS again to fit a new theme.
That said, I'm now experimenting with responsive columns and it _seems_ that I may have solved the problem by adding a class to the columns.
Thanks for the reply though.
thank you Ellen degeneres
:)
So funny, u make my day JokeR. Thank u Kori by the way.
Well you're cool but I was looking for the other way around that is not embedding in my web and make it responsive (which still wouldn't be possible your way if the has inline style width fixed) but was looking for generating responsive code for others webs which shows some content from my web
Would you be able to just use an API and pull their data into your website to style it anyway that you'd like?
No I didn't want to pull data in my website, well let me clarify it to you in parts, to break it
i. I have a website say, "www.embedfrom.com" which has say, some maps functionality and I like to share that map functionality with other developers by providing them with embed codes like we would on TH-cam (I put embed code of your video below)
ii. But if you check that embed code you'll find that given has fixed width and if a developer say Dev1 copies it to her website it's not responsive unless she makes some changes to the embed code i.e. change width
iii. So what I'm looking for is without having Dev1 to do anything except copy/paste the embed code is it possible to make it responsive
embed code for your video (won't show up properly due to input sanitization):
@@KoriAshton
Ah! You're looking to create code for others that is already responsive. Okay - see if this CSS helps you create that. They may have to reference this in their CSS too - but it would solve it blog.theodo.fr/2018/01/responsive-s-css-trick/
Thanks Kori that's really good one article it's still addressing in same way but the article is really good, I appreciate your hunting :) do you just do Wordpress or you're into world of JavaScript as well ?@@KoriAshton
Thankfully I have a team around me that can do Javascript. WebTegrity is my company and I've hired many developers who are way more advanced at code than me :)
What if the has an img inside? Would this still work?
It worked! Thanks for sharing that, Kori. You're awesome!
can I edit like this with premium plan?
WebTegrity thank u😘
Thank you Thank You Thank You Corie Ashton! your videos are very helpful, very inspiring. Love the energy!
Extremely Helpful. Thanks to you I now have a happy client :D
Yay!!! Glad it helped!
how do i get to my dashboard??? like, ive looked EVERYWHERE but i cant get to the screen that you're showing in the video...haaallppppp!!!
Thank you so much, this works perfectly, I really appreciate your help, only I needed to turn padding-top: to 0px to fix the black edges, I'll try to explain this to my subscribers as well.
Excellent!
It works for other s also and not only video. Like for other embeded content which isn't video.
Hello, what can I do with facebook post ? Not video
Thanks for leaving a comment. Looks like we may have missed this in the thread. If we can ever help in the future - know that we're still here.
Love this! Thank you Kori 😀
You're so kind!
I know, your used to hearing it - Your Awesome!!!!
Ahh wow!! It feels amazing every time!
Hello from Marseille, France ... thank you so much for you great videos. This one in particlular was REALLY helpful. Without your video, I was considering going for a paid option.
I did have one unresolved issue though:
Although your solution dealt with the correct sizing of an / external link on my site mw-com.fr/en/home so that it's correctly displayed on all devices, on iPad (and I'm guessing maybe on other iOS devices), I have neither a scroll bar, nor an ability to "finger scroll".
Can you suggest a solution?
Many thanks in advance for any assistance.
Kind regards.
Fantastic tutorial
Thank you so much for this excellent coding!!! great job.
Glad to help!
You are a lifesaver. Thank you for this!!
You're the best.
Sure kind comment. Thank you
Wow! I can't believe that I was able to do that. Thanks a lot :)
Love your videos, thanks!!!
This was AMAZING!!!! Thank you, thank you, thank you!!!
Thank you! It worked!
You're welcome!
Very helpful, thanks!
This really helped, Thank you.
Glad it helped!
You rock!!! Thanks for the help. Works good.
You rock! Thanks!
This comment makes me smile even six years later!!
Thank you for lessons
Love it! Thank you.
Thank you so much! This is perfect!
so helpfull,,,,thank you,,☺
Glad to help!
thank you koki like you tutorial
Thanks for leaving a kind comment.
Excelente !!! muchas gracias ! muy util :)
Thank you for this
Sure thing!
thanks soooooo much
Thank you soooo much!!
but this is just for the video, what about the rest of the page...?
You can use the same concept. iFrames are not the best user experience though for any website these days.
AWESOME!!!! Thanks so much for that. HUGE help.
Thanks a lot!
Thank you so much for this video. I know that it is old, but let me tell you; I had been looking over my #nerdcode LOL and could not for the life of me figure out why my wasn't responsive on ios. Turns out I had an extra
You're very welcome!
Thanks so much for this =)
I love you. Te amo pequeña, gracias!!
De nada!! :)
Thanks a lot!!!!
awesome!
Si funciona, genial !!!
only thing this did was cause my TH-cam video/ to shrink really tiny in size.
Maybe try to set the size to auto.
This. Is. So. Rad.
Thank. You.
Don't we have a Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website? plus this in your CSS =
.-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.-container {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Wow! Very cool. Thanks for sharing!
tutorial was awesome. instead of doing all this how about simple code
{max-wdith:100%;}
:P :P
#THANKYOU #POWERUP
Thank you very much
You're welcome ☺
thank you very much
Thanks for leaving a kind comment. Looks like we may have missed this in the thread. If we can ever help in the future - know that we're still here.
Don't we have an Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website?
Plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
Was this able to work for you?
Don't we have an Install and Forget 'responsive plugin' that will fix all past and future s on your website automatically placing above and below the thousands of previous s on your website?
Plus this in your CSS = .-container{ position: relative; width: 100%; padding-bottom: 56.25%; height: 0; } .-container { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
Were you able to get this working for you?