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.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by