I am trying to embed a youtube video into my product landing page and make it responsive. The issue is that no matter what method I try I can’t get it to work.
I was following along with this article by CSS Tricks (link) and attempted to use the code. I can’t get it to work on my page.
My video should be under the text in the video section (HTML 60, CSS 163, black
section ‘Power Never Seen Before’ on layout). However, the positioning used sends it straight to the top of the page under my navigation bar.
Should I try the fitVids() that is being referenced or keep with this?
Also, there is a new method using the CSS aspect-ratio property which is much simpler than the above, as long as you don’t need to support IE or any older versions of the most popular browsers. Using this method I did the following to get your video placed the way you want it:
Remove absolute positioning on the youtube iframe which puts the video back where you want it.
On the parent div (.engine-test-video-wrapper) set the width to 100% and the max-width to whatever you want to limit it to.
On the youtube iframe, keep the width at 100% and set aspect-ratio: 16/9;