2 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 10+ items on Envato Market
dep0we says

I’m using the following landing page template http://themeforest.net/item/jday-coming-soon-page/2687823 for my website http://www.touchdowntommie.com.

Within the page I’m embedding a video and using the following CSS for a Elastic container:

.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%; }

I’d like the video to not use the container when browsing from my PC/Mac but do use the container when being browsed from a mobile device. Currently I have the CSS config within my style.css. Where should this reside to achieve the desired outcome? Possibly within 1 of the following instead? (bootstrap.css or bootstrap-responsive.css or style_responsive.css)

Or is there a simpler/better way of doing this all together? thanks!

2 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 10+ items on Envato Market
dep0we says

The goal is to just limit the video from taking over the entire page. The container is using 100% width currently. I did readjust this to a small size but then the video is off centered. Probably a simple answer that I’ve not figured out quite yet. If the video will center then a simple resizing within the contain would meet my needs.

by
by
by
by
by
by