It never ceases to astonish me that whenever I run into a WordPress problem or curiosity, someone out there has had the same thought and brilliantly masterminded a solution! I just ran into one such conundrum and wanted to share the answer with you all.
I am designing an Ecommerce website, and of course in this day and age it needs to be fully responsive. The theme itself is working like a dream and seems to be adapting remarkably well through all the testing. The only thing that was not responsive was the embedded YouTube video. However I found this little quick fix on a fellow WordPress designers’ blog and it worked like a dream! Give it a try yourself:
First you will need to add the following to your style sheet:
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}.video-container iframe,.video-container object,.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
Next, edit add some HTML around your embed code:
<div class="video-container"></iframe></div>Check out this video on your phone, tablet, and computer to see it in action!