Page 1 of 3 123 LastLast
Results 1 to 10 of 28

Thread: responsive 2 columns with youtube video problem

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Question responsive 2 columns with youtube video problem

    On this page I have 2 youtube videos side by side in columns. It appears fine when I look at it full screen.

    Click image for larger version. 

Name:	ref1.JPG 
Views:	486 
Size:	74.5 KB 
ID:	5640

    When I have a smaller screen, the images are right into each other sideways, and when it's mobile sized, the videos hang out of the container.

    Click image for larger version. 

Name:	ref2.JPG 
Views:	358 
Size:	42.3 KB 
ID:	5641

    html for that part
    Code:
    <div class="section group">
    	<div class="col span_1_of_2">
    	<iframe width="450" height="363" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?" frameborder="0" allowfullscreen></iframe>
    <p>Click Above To View Testimonial Video!</p>
    	</div>
    	<div class="col span_1_of_2">
    	<iframe width="450" height="363" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?" frameborder="0" allowfullscreen></iframe>
    <p>Click to see Peter in seminar action!</p>
    	</div></div>
    <div style="clear:both"></div>
    Css for that part
    Code:
    /*  SECTIONS  */
    .section {
    	clear: both;
    	padding: 0px;
    	margin: 0px;
    }
    
    /*  COLUMN SETUP  */
    .col {
    	display: block;
    	float:left;
    	margin: 1% 0 1% 1.5%;
    }
    .col:first-child { margin-left: 0; }
    
    
    /*  GROUPING  */
    .group:before,
    .group:after {
    	content:"";
    	display:table;
    }
    .group:after {
    	clear:both;
    }
    .group {
        zoom:1; /* For IE 6/7 */
    }
                                                   
    					
    
    /*  GRID OF TWO  */
    .span_2_of_2 {
    	width: 100%;
    }
    .span_1_of_2 {
    	width: 49.25%;
    }
    
    /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
    
    @media only screen and (max-width: 480px) {
    	.col { 
    		margin: 1% 0 1% 0%;
    	}
    }
    
    @media only screen and (max-width: 480px) {
    	.span_2_of_2 {
    		width: 100%; 
    	}
    	.span_1_of_2 {
    		width: 100%;
    	}
    }

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    the bottom part of the page I will be fixing later on with a responsive image grid that Beverly linked me to

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    https://css-tricks.com/NetMag/FluidW...WidthVideo.php

    The part you need is;
    Code:
    <div class="videoWrapper">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
    </div>
    Code:
    .videoWrapper {
    	position: relative;
    	padding-bottom: 56.25%; /* 16:9 */
    	padding-top: 25px;
    	height: 0;
    }
    .videoWrapper iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    That does make them responsive! It makes the videos full sized on top on each other. How can I make it do that the videos are side by side? with space between them

    this is the html I used
    Code:
    <div class="videoWrapper">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="450" height="363" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?" frameborder="0" allowfullscreen></iframe>
    <p>Click Above To View Testimonial Video!</p>
    </div>
    <div class="videoWrapper">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="450" height="363" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?" frameborder="0" allowfullscreen></iframe>
    <p>Click to see Peter in seminar action!</p>
    </div>	
    <div style="clear:both"></div>
    I used the css above that you posted.
    thank you so much for helping

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Where are the markup classes for your grid system? You seem to have totally removed them and switched to the standalone fluid videoWrapper markup (which will default to 100% width because divs are block level elements).

    Remember that you need extra layout markup to create the 2-column layout. The responsive video markup and CSS is just for videos within responsive design. The layout would be extra.

    I'm not sure what grid system you're using but here's a simplified demo http://fofwebdesign.co.uk/template/_...rwd-videos.htm
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    I forgot the grid system. I just uploaded again. It makes the 2 videos on top of each other (from left to right) when the screen goes smaller. When it's small they are on top of each other properly but in both cases the video hangs over the right out of the container again.
    look here at uploaded working page

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I'm on iPhone at the mo and can't see how you're CSS is being applied. I can view your source code though and there is a styles-test.css file throwing up a 404 error. Is your CSS there and not being applied to the page?

    I also see a styles.css file with CSS for .Flexible-container iframe (the same as the videoWrapper stuff) However, I can't see a container anywhere in your markup with the ".Flexible-container" class applied.

    So at this stage it looks like the pertinent CSS isn't being applied to the videos (wrong classes).

    To confirm;

    - you have the relevant flexible video CSS in the "styles.css" file, defined under ".Flexible-container", but the class doesn't appear to be used in your markup.

    - you have ".videoWrapper" in your HTML markup, but you don't have it defined in the "styles.css" stylesheet

    Maybe you can use a simpler "grid system" like in this demo http://fofwebdesign.co.uk/template/_...rwd-videos.htm
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #8
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    It's working now. I re-uploaded the styles.css again and then refreshed the page and css cache. It works now.

    this is the entire css file

    Now, I'm off to work on changing all the images using the responsive grid system you showed me earlier this week.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <title>CSS3 Grid Images - Fluid Scale, Responsive</title>
    <!-- http://www.dynamicdrive.com/forums/archive/index.php/t-77355.html -->
    
    <style>
    html, body { margin:0; padding:0; font:16px/1.75 Verdana, Arial, Helvetica, sans-serif; background:#ccc }
    #header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }
    .page-content { padding:1em; max-width:64em; margin:auto; background:#fff }
    table { margin:1em 0 }
    td { font-weight:bold }
    td, input { text-align:center }
    .right { text-align:right }
    .left { text-align:left }
    .clearfix:after { content:" "; display:table; clear:both }
    
    
    .img-01 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Truly Outrageous Jem.jpg') }
    .img-02 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Zazz & Roxy.JPG') }
    .img-03 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - double vision.JPG') }
    .img-04 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Rio and Rio.jpg') }
    .img-05 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Now.JPG') }
    .img-06 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Roxy GGGRRRRR.jpg') }
    .img-07 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - those pants - back.jpg') }
    .img-08 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - those pants - front.jpg') }
    .img-09 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Minx Rio & Jem again.jpg') }
    .img-10 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Minx saunters.jpg') }
    .img-11 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - One Pizzazz Too Many.jpg') }
    .img-12 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - loves young dream.jpg') }
    .img-13 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - down with the 80s.JPG') }
    .img-14 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - he is mine Jem.jpg') }
    .img-15 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - mini Misfits.jpg') }
    .img-16 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - nasty Jetta & Roxy.jpg') }
    .img-17 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - sexy Pizzazz!.jpg') }
    .img-18 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - sexy Roxy.jpg') }
    .img-19 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Mr Jem Pants & Jetta.JPG') }
    .img-20 { background-image:url('/freebies-for-websites/php/gallery/small/Cosplay - Mr Jem Pants!.jpg') }
    
    /* #### - reduce padding-bottom for rectangular images (75% = 4:3 aspect ratio, 56.25% = 16:9 aspect ratio) - #### */
    .img { padding-bottom:100%; width:100%; background-position:center; background-repeat:no-repeat; background-size:cover }
    .img:hover { opacity:0.5 }
    
    /* #### - smallest width = 2 images per row - #### */
    .grid-outer { margin:-3% } /* negative value of .grid margin */
    .grid { float:left; margin:3%; width:44% } /* width = (100 / images per row) - ( margin x 2 ) */
    
    @media ( min-width:20em ) { /* #### - > 320px = 3 images per row - #### */
    	.grid-outer { margin:-2% } /* negative value of .grid margin */
    	.grid { margin:2%; width:29.333% } /* width = (100 / images per row) - ( margin x 2 ) */
    }
    
    @media ( min-width:35em ) { /* #### - > 560px = 4 images per row - #### */
    	.grid-outer { margin:-1.5% } /* negative value of .grid margin */
    	.grid { margin:1.5%; width:22% } /* width = (100 / images per row) - ( margin x 2 ) */
    }
    
    @media ( min-width:50em ) { /* #### - > 800px = 5 images per row - #### */
    	.grid-outer { margin:-1% } /* negative value of .grid margin */
    	.grid { margin:1%; width:18% } /* width = (100 / images per row) - ( margin x 2 ) */
    }
    </style>
    
    <!--[if lt IE 9]>
    <style>
    .grid-outer { margin:-1% }
    .grid { width:125px; margin:1% }
    .img { height:125px; padding-bottom:0 }
    .clearfix { *zoom:1 }
    </style> 
    <![endif]-->
    
    </head>
    <body>
    
    <div id="header">
    	<a href="/"><img src="/template/images/logo-50x50.png" style="position:absolute; top:0.5em; left:1em; width:3em; height:3em; border:0" alt="Home" title="Home"/></a>
    	<span style="position:absolute; top:1.175em; left:5em; color:#fff">Focus on Function</span>
    </div><!-- closing "#header" -->
    
    <div class="page-content">
    
    <h2>CSS3 Grid Images - Fluid Scale, Responsive</h2>
    <p>The images in this demo fluidly scale down in size as the browser width decreases. They do not break out of their grid.</p>
    <br/>
    
    <div class="grid-outer clearfix">
    	<div class="grid">
    		<div class="img img-01"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-02"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-03"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-04"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-05"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-06"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-07"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-08"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-09"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-10"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-11"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-12"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-13"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-14"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-15"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-16"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-17"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-18"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-19"></div>
    	</div>
    	<div class="grid">
    		<div class="img img-20"></div>
    	</div>
    </div>
    <br/>
    
    
    	<h2>Compatibility</h2>
    	<ul>
    	    <li>IE9+ *</li>
    	    <li>Chrome</li>
    	    <li>Safari</li>
    	    <li>Firefox</li>
    	    <li>Opera</li>
    	    <li>Android</li>
    	    <li>iOS</li>
    	</ul>
    	<p>* "background-size:cover;" isn't supported in IE7/8 so a fixed-size fallback is provided for those browsers.</p>
    
    <div id="calc">
    	<h2>Grid Image Calculator</h2>
    	<p>This form calculates the required <b>width</b> CSS value of each image in a row, for this demo's fluid grid scaling.</p>
    	<p>Enter the desired number of images per row, the margin around images, then transfer the results to your CSS.</p>
    	<table>
    	    <tr>
    		<td>&nbsp;</td>
    		<td>images per row</td>
    		<td>margin (%)</td>
    	    </tr><tr>
    		<td class="right"> </td>
    		<td><input type="text" id="ipr" /></td>
    		<td><input type="text" id="mar" /></td>
    	    </tr><tr>
    		<td>&nbsp;</td>
    		<td colspan="2"><input type="submit" onclick="Calculate();" value="CALCULATE"/></td>
    	    </tr><tr>
    		<td class="right">width: </td>
    		<td><input type="text" id="wth" /></td>
    		<td class="left">% (per image)</td>
    	    </tr>
    	</table>
    </div>
    
    &nbsp;
    </div><!-- closing ".page-content" -->
    
    <script>
    function roundNumber(number, digits) {
                var multiple = Math.pow(10, digits);
                var rndedNum = Math.round(number * multiple) / multiple;
                return rndedNum;
            }
    function Calculate() {
    	var ipr = document.getElementById('ipr').value;
    	var mar = document.getElementById('mar').value; 
    	var wth = (100 / ipr) - (mar * 2);
    	document.getElementById('wth').value = roundNumber(parseFloat(wth), 3);
         	localStorage.setItem('ipr', ipr.value);
         	localStorage.setItem('mar', mar.value);
    	}
    </script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    /*  })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); */
      })(window,document,'script','//fofwebdesign.co.uk/template/scripts/ga.php','ga');
      ga('create', 'UA-33863475-1', 'fofwebdesign.co.uk');
      ga('send', 'pageview');
    </script>
    
    </body>
    </html>
    Last edited by mlegg; 03-21-2015 at 07:05 PM.

  9. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Looks good. It's coming along very nicely
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. The Following User Says Thank You to Beverleyh For This Useful Post:

    mlegg (03-21-2015)

  11. #10
    Join Date
    Jan 2009
    Location
    NH
    Posts
    673
    Thanks
    97
    Thanked 26 Times in 26 Posts

    Default

    The videos are responsive but not side by side. I must have changed something without making a backup. Here is the test page with the videos

    CSS
    Code:
    body {
        width:100%;
        margin:0;
        color: #000000;
        background-color:#191919;
        font-family:'Open Sans',sans-serif;
        font-size:18px;
     }
    #container {
        width:90%;
        margin:auto;
        background-color:#ffffff;    
     font-family : sans-serif;
    color : #000000;
    font-size: 18px;
    }
    img {
    max-width: 100%;
    height: auto;
    }
    #logo {
        display:block;
        width:100%;
     }
    #content {
        color: #000000;
        clear:both;
        position:relative;
        padding:1.5em 5%;
        font-size: 18px; 
    }
    ul {
        padding:0;
        margin:0;
        list-style-type:none;
     }
    a {
        text-decoration:none;
     }
    #vlb1overlay {z-index:100 !important;}
    .arrow-down {
    	width: 0; 
    	height: 0; 
    	border-left: 20px solid transparent;
    	border-right: 20px solid transparent;
    	
    	border-top: 20px solid #000;
    }
    h1 {
        color:#FF0000;
        clear:both;
        text-align:center;
     }
    h2 {
        color:#FF0000;
        clear:both;
        text-align:center;
     }
    h3 {
        color:#FF0000;
        clear:both;
        text-align:center;
     }
    #Intro {
        font-size: 20px;
        color:#FF0000;
        font-style: italic;
        clear:both;
     }
    #Sig {
        font-family:Brush Script MT;
       color:#FF0000;
       font-size:1.6em;
       clear:both;
    }
    audio {
        visibility:hidden; 
        height:0; 
        width:0;
     }
    #pauseplay {
        float:right; 
        width:32px; 
        height:32px; 
        cursor:pointer;
     }
    
    .innerBox {
      background-color : #ffffff;
      background-repeat : repeat-y;
      padding-top: 1em;
      padding-left: 1em;
      padding-right: 1em;
      padding-bottom : 1em;
    }
    .vid-content { padding:1em; max-width:64em; margin:auto }
    
    .videoWrapper { position:relative; padding-bottom:56.25%; padding-top:25px; height:0 }
    .videoWrapper iframe { position:absolute; top:0; left:0; width:100%; height: 100% }
    .col, .col * { box-sizing:border-box }
    .col { padding:2% 0 }
    
    @media ( min-width:35em ) { /* #### - > 560px (560 / 16 = 35) - 16px being default browser font-size - #### */
    	.col { width:50%; padding:2% }
    	.col-1 { float:left }
    	.col-2 { float:right }
    }
    .quotes { position:relative; max-width:80em; list-style-type:none; text-align:center; margin:0 auto; padding:0 }
    .quotes li { position:absolute; left:0; right:0; background:#ddd; text-align:center; padding:1em; border-radius:0.25em; opacity:0 }
    .quotes span { display:block; text-align:right; margin-right:5%; margin-top:1em; font-size:80%; font-style:italic; color:#999 }
    .quotes li:after { /* quote triangle */
    	position:absolute; content:""; display:block; width:0; height:0; 
    	border-left:0.75em solid transparent;
    	border-right:0.75em solid transparent;
    	border-top:0.75em solid #ddd;   
        	bottom:-0.75em;
        	left:2em
    	}
    .quotes .show { position:relative; -webkit-animation:quote 5s infinite; animation:quote 5s infinite } /* animation lasts 5 secs */
    @-webkit-keyframes quote {
    	0%   { opacity:0 }
    	25%  { opacity:1 }
    	75%  { opacity:1 }
    	100% { opacity:0 }
    	}
    @keyframes quote {
    	0%   { opacity:0 }
    	25%  { opacity:1 }
    	75%  { opacity:1 }
    	100% { opacity:0 }
    	}
    
    #left {
        float: left;
        width: 32%;
        padding:5px;
    }
    
    #middle { 
        float: left;
        width: 32%;
        padding:5px;
    }
    
    #right {
        float:left;
        width:32%;
        padding:5px;
    }
    
    .columns {
        width:100%;
    }
    .left{
        float:left;
        width:48%;    
     }
    .right {
        width:48%;
     }
    .clear {
        clear:both;
     }
    /* Flexible iFrame */
    
    .Flexible-container {
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;
    }
    
    .Flexible-container iframe,   
    .Flexible-container object,  
    .Flexible-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /*  SECTIONS  */
    .section {
    	clear: both;
    	padding: 0px;
    	margin: 0px;
    }
    
    /*  COLUMN SETUP  */
    .col {
    	display: block;
    	float:left;
    	margin: 1% 0 1% 1.5%;
    }
    .col:first-child { margin-left: 0; }
    
    
    /*  GROUPING  */
    .group:before,
    .group:after {
    	content:"";
    	display:table;
    }
    .group:after {
    	clear:both;
    }
    .group {
        zoom:1; /* For IE 6/7 */
    }
                                                   
    					
    
    /*  GRID OF TWO  */
    .span_2_of_2 {
    	width: 100%;
    }
    .span_1_of_2 {
    	width: 49.25%;
    }
    
    /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
    
    @media only screen and (max-width: 480px) {
    	.col { 
    		margin: 1% 0 1% 0%;
    	}
    }
    
    @media only screen and (max-width: 480px) {
    	.span_2_of_2 {
    		width: 100%; 
    	}
    	.span_1_of_2 {
    		width: 100%;
    	}
    }
    
    #footer {
        background:#E45E17;
        width:90%;
        height: auto;
        margin:auto;
        text-align:center;
        font-family:sans-serif;
        font-size:16px;
        color:#010101;
        padding:0.5em 0;
     }
    #footer a:link {
    color : #000000;
    text-decoration : underline;
    }
    #footer a:visited {
    color : #000000;
    text-decoration : underline;
    }
    #footer a:hover {
    color : #000000;
    background-color : #E45E17;
    text-decoration : underline;
    }
    #footer a:active {
    color : #000000;
    background-color : #FFFFFF;
    text-decoration : underline;
    }
    
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    /* Styles */
    }
    
    /* Smartphones (landscape) ----------- */
    @media only screen 
    and (min-width : 321px) {
    /* Styles */
    }
    
    /* Smartphones (portrait) ----------- */
    @media only screen 
    and (max-width : 320px) {
    /* Styles */
    }
    
    /* iPads (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) {
    /* Styles */
    }
    
    /* iPads (landscape) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    /* Styles */
    }
    
    /* iPads (portrait) ----------- */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
    /* Styles */
    }
    
    /* Desktops and laptops ----------- */
    @media only screen 
    and (min-width : 1224px) {
    /* Styles */
    }
    
    /* Large screens ----------- */
    @media only screen 
    and (min-width : 1824px) {
    /* Styles */
    }
    
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    The HTML is too long to post.
    Attached Files Attached Files
    Last edited by mlegg; 03-25-2015 at 11:52 PM. Reason: can't upload the HTML

Similar Threads

  1. Resolved Responsive video element
    By FrickenTrevor in forum CSS
    Replies: 10
    Last Post: 12-05-2014, 02:00 PM
  2. Replies: 3
    Last Post: 06-10-2011, 05:11 AM
  3. embed youtube video problem
    By biomike in forum HTML
    Replies: 6
    Last Post: 01-14-2010, 09:03 AM
  4. Using Lightbox with Youtube Video
    By vanbao in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 02-04-2008, 08:21 PM
  5. embeding youtube video
    By ferlach in forum HTML
    Replies: 11
    Last Post: 01-05-2008, 08:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •