E
ecurrenAug 25, 2016
Hello,
I have embedded an HTML 5 video in my page. When I resize the browser the player does not resize "well". It will overflow the div tag or not change width but will take the full height of the column.
I have uploaded it to http://duckair.azurewebsites.net/duckairlines/one-page/index.html
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="SemiColonWeb" />
<!-- Stylesheets
============================================= -->
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700|Roboto:300,400,500,700" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../style.css" type="text/css" />
<link rel="stylesheet" href="../css/colors.css" type="text/css" />
<!-- One Page Module Specific Stylesheet -->
<link rel="stylesheet" href="onepage.css" type="text/css" />
<!-- / -->
<link rel="stylesheet" href="../css/dark.css" type="text/css" />
<link rel="stylesheet" href="../css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="css/et-line.css" type="text/css" />
<link rel="stylesheet" href="../css/animate.css" type="text/css" />
<link rel="stylesheet" href="../css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="css/fonts.css" type="text/css" />
<link rel="stylesheet" href="../css/responsive.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- Document Title
============================================= -->
<title>Duck Airlines | Pluralsight</title>
</head>
<body class="stretched side-push-panel">
<!-- Document Wrapper
============================================= -->
<div id="wrapper" class="clearfix">
<!-- Header
============================================= -->
<header id="header" class="full-header transparent-header border-full-header dark static-sticky" data-sticky-class="not-dark" data-sticky-offset="full" data-sticky-offset-negative="100">
<div id="header-wrap">
<div class="container clearfix">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="images/ps_logo_dark.png"><img src="images/ps_logo.png" alt="Canvas Logo"></a>
<a href="index.html" class="retina-logo" data-dark-logo="images/ps_logo_dark.png"><img src="images/ps_logo.png" alt="Canvas Logo"></a>
</div><!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<nav id="primary-menu">
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65">
<li><a href="#" data-href="#wrapper"><div>Home</div></a></li>
<li><a href="#" data-href="#section-downloads"><div>Downloads</div></a></li>
</ul>
<!-- <div id="side-panel-trigger" class="side-panel-trigger"><a href="#"><i class="icon-reorder"></i></a></div> -->
</nav><!-- #primary-menu end -->
</div>
</div>
</header><!-- #header end -->
<!-- Slider
============================================= -->
<section id="slider" class="slider-parallax full-screen force-full-screen">
<div class="slider-parallax-inner">
<div class="full-screen force-full-screen dark section nopadding nomargin noborder ohidden" style="background-image: url('images/AirlinerOne.jpg'); background-size: cover; background-position: center center;">
<a href="#" data-scrollto="#section-downloads" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" class="one-page-arrow dark"><i class="icon-angle-down infinite animated fadeInDown"></i></a>
</div>
</div>
</section><!-- #slider end -->
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="col_one_fourth"></div>
<div class="col_half">
<div id="section-downloads" class="page-section">
<div class="heading-block center">
<h2>The Courses</h2>
<span>This is the list of Pluralsight courses using Duck Airlines for their project</span>
</div>
<div id="wso2course1" class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Fast Enterprise Application Development With WSO2</h2>
</div>
<div class="panel-body">
<div class="col_half">
This course is an introduction to the WSO2 middleware platform. You will learn how to use the platform to create a robust enterprise system by employing the WSO2 servers and frameworks. I start you at the beginning by showing you how to install and configure the platform’s servers to get your project up and running before starting to build the example system. The example system will make use of WSO2’s ESB, API Manager, Data Services Server, and the Business Rules Server.
<br><br>
<h4 class="nobottommargin">Downloads</h4>
<a href="#">Development Environment Setup Guide</a><br>
<a href="#">MySQL Database Setup Script</a>
</div>
<div class="col_half col_last">
<div class="clearfix">
<div class="video-wrap">
<video controls preload="auto" width="100%" height="auto">
<source src="images/videos/pluralsight.mp4">
</video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col_one_fourth col_last"></div>
</div>
</section><!-- #content end -->
<!-- Footer
============================================= -->
<footer id="footer" class="dark noborder">
<div id="copyrights">
<div class="container center clearfix">
Copyright Edward Curren 2016 | All Rights Reserved
</div>
</div>
</footer><!-- #footer end -->
</div><!-- #wrapper end -->
<!-- Go To Top
============================================= -->
<div id="gotoTop" class="icon-angle-up"></div>
<!-- External JavaScripts
============================================= -->
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/plugins.js"></script>
<!-- Footer Scripts
============================================= -->
<script type="text/javascript" src="../js/functions.js"></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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-82866028-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>Thanks for your help.