Help - Search - Members - Calendar
Full Version: Iframe Video not playing on IE and Safari
HTMLHelp Forums > Web Authoring > Graphics, Flash and Multimedia
Jason Forbe
When edit the video for this code: <iframe src="//player.vimeo.com/video/78695612?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

All the sliders are no longer visiable.

Please help


<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<!--
================================================================================
=======
Lansing Product Landing Page Template by United Themes (http://www.unitedthemes.com)
Marcel Moerkens & Matthias Nettekoven
================================================================================
=======
-->

<head>

<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Ultimate Voice Builder</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/ut-fontface.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/ut-responsive-grid.css">
<link rel="stylesheet" href="css/style.css">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<style type="text/css">
body {
background-color: #FFFFFF;
}
</style>

<!-- Load jQuery
================================================== -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/respond.src.js"></script>

</head>
<body id="mainsite">

<a id="top"></a>

<!-- Primary Page Layout
================================================== -->

<!-- header section -->
<header id="header-section" class="hide-on-mobile">
<div class="grid-container">
<div class="grid-parent grid-100 mobile-grid-100 tablet-grid-100">
<div class="site-branding grid-30 mobile-grid-100 tablet-grid-100">
<a href="#top"><h1><img src="images/UVB_Website_Logo_Linear.png"></h1></a>
</div>
<nav id="ut-navigation" class="grid-70 hide-on-mobile tablet-grid-100">
<ul>
<li><a class="selected" href="#top">HOME</a></li>
<li><a href="#gallery">ABOUT</a></li>
<li><a href="#products">TESTIMONIALS</a></li>
<li class="ut-cta"><a class="ut-navigation-cta" href="http://ultimatevoicebuilder.net/store/index.html">ORDER NOW<i class="icon-cloud-download"></i></a></li>
</ul>
</nav>
</div>
</div><!-- close container -->
</header><!-- close header section -->

<!-- product section -->

<div class="grid-container">
<div class="grid-100 mobile-grid-100 tablet-grid-100">

<div class="site-branding hide-on-tablet hide-on-desktop">
<h1><a href="index.htm">Ultimate Voice Builder</a></h1>
</div>

<h1 class="product-title hide-on-mobile"></h1>

<p class="product-description"></p>


<!-- entry header -->
</div>
</div>
</section> <!-- information section -->
<section id="information-section" class="information-section">
<div class="grid-container">
<!-- close entry header -->

</div> <!-- section slider -->
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li data-thumb="">
<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_Slide_1a.jpg" alt="slide-3" /></a>
</li>
<li data-thumb="">

<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_Slide_2.jpg" alt="slide-4" /></a>
</li>
<li data-thumb="">
<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_Slide_4.jpg" alt="slide-4" /></a>
</li>
<li data-thumb="">
<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_Slide_3.jpg" alt="slide-4" /></a>
</li>
</li>

</ul>
</div>
</section><!-- close section slider -->
<!-- icon box 1 -->
<div class="grid-33 mobile-grid-100 tablet-grid-50 info">
<h3>Gary Catona</h3>
<p>Philadelphia-born, Gary Catona discovered early his talent for singing and proceeded to develop a revolutionary method that enables anyone to build his or her voice. From modest origins, Gary Catona worked relentlessly to develop his method and achieved a mind-blowing success. <p>

</div><!-- close icon box -->

<!-- icon box 2 -->
<div class="grid-33 mobile-grid-100 tablet-grid-50 info">
<h3>The Voice-Building System</h3>
<p>Gary Catona’s Voice Building system is the result of years of study and research into the physical basis of the human voice. The Catona’s voice-building system creates power, resonance, range and endurance of the singing and speaking voice.<p>

</div><!-- close icon box -->

<!-- icon box 3 -->
<div class="grid-33 mobile-grid-100 tablet-grid-50 info">
<h3>Students</h3>
<p>Gary Catona, the voice builder of the stars, counts among his students some of the greatest singers and entertainers of modern time. <p>
<a class="learn-more" href="Students.html"><i class="icon-li icon-chevron-sign-right"></i>Learn more</a>
</div><!-- close icon box -->

<div class="clear hide-on-mobile hide-on-tablet"></div>

<!-- icon box 4 --><!-- close icon box -->

<!-- icon box 5 --><!-- close icon box -->

<!-- icon box 6 --><!-- close icon box -->

</div><!-- close grid-container -->
</section><!-- close information section --><!-- close product section -->

<div class="clear"></div>

<!-- Gallery Section -->
<section id="gallery" class="gallery-section">
<div class="grid-container">
<div class="grid-container">

<div align="right">
<!-- product image left -->
<!-- close product image left -->
<!-- section gallery left -->
<section id="gallery" class="product-left cbp-so-section cbp-so-init">
<div class="grid-container">

<div align="right">

<!-- product image left --><!-- close product image left -->
</div>
<div class="grid-45 prefix-5 mobile-grid-100 tablet-grid-50 cbp-so-side-right cbp-so-side">

<div align="left">

<!-- entry header -->
<span class="entry-title"><img src="images/UVB_Website_ABOUT_TITLE.jpg" align="left"></span></div>
<header class="entry-header">
<h2 align="left" class="entry-title">&nbsp;</h2>
</header>
<div align="left">
<!-- entry header -->

</div>
<p align="left"></p>
</div>

<div class="grid-60 suffix-5 grid-parent mobile-grid-100 tablet-grid-100">
<div class="grid-100 mobile-grid-100 tablet-grid-100">

<!-- section slider -->
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li data-thumb="">
<iframe id="player_1" src="http://player.vimeo.com/video/78695612?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</div>
<p align="right"> <a class="Learn more" href="#"><i class="icon-li icon-chevron-sign-right"></i> View more videos</a> </p>
</section><!-- close section slider -->

<p>&nbsp;</p>
<p align="justify">Would you like to have a stronger voice? A voice that draws people to you? Are you dissatisfied with your weak, nasal, unsexy voice? “Behind a great voice is the muscular voice.” The Catona’s Voice-Building System will build a captivating and sexy voice quickly and dramatically. Those kinds of voices have strong vocal muscles. You are NOT stuck with the voice you were born with. </p>
<p>
<p align="center" ><strong><u>NOW</u> is your chance to bring home the powerful voice-building system that has been used by the greatest stars and entertainers. </strong></p>
<p>
<p align="justify">Learn from the Maestro of the Stars how to build the voice you’ve always wanted RIGHT NOW! You will hear your voice developping almost immediately. Gary Catona’s ultimate voice-building system has been described as nothing short of miraculous by his famous students. The Ultimate Voice Builder™ is the answer you’ve always been searching for!</p>
<p>

</div>
</div>

<div class="grid-35 mobile-grid-100 tablet-grid-100">

<div align="right">
<!-- entry header -->
</div>
<header class="entry-header">
<div align="right"><a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_ABOUT_Special_Offer_Banner1.png" alt="prdocut-right" width="370"></a>

</div>
</header>

<div align="right">
</div><!-- close container -->
<p><div align="center"><img src="images/Paypal.png" alt=""/></a></div></p>
</section>
<!-- information section -->
<section id="information-section" class="information-section"><!-- close grid-container -->
</section><!-- close information section -->

<div class="clear"></div>

<!-- section product left -->
<section id="products" class="product-left cbp-so-section cbp-so-init">
<div class="grid-container">

<div align="right">

<!-- product image left --><!-- close product image left -->
</div>
<div class="grid-45 prefix-5 mobile-grid-100 tablet-grid-50 cbp-so-side-right cbp-so-side">

<div align="left">

<!-- entry header -->
<span class="entry-title"><img src="images/UVB_Website_TESTIMONIALS_TITLE.jpg" align="left"></span></div>
<header class="entry-header">
<h2 align="left" class="entry-title">&nbsp;</h2>
</header>
<div align="left">
<!-- entry header -->

</div>
<p align="left"></p>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">


<tr>
<th scope="col"><img src="images/UVB_Website_TESTIMONIALS_Bubble1.png"></th>
<th scope="col"><img src="images/UVB_Website_TESTIMONIALS_Bubble2.png"></th>
<th scope="col"><img src="images/UVB_Website_TESTIMONIALS_Bubble3.png"></th>
</tr>
</table><br>

</table><br>
<p align="right"> <a class="learn-more" href="#"><i class="icon-li icon-chevron-sign-right"></i>More to come</a> </p>

<div align="right">

<!-- product image left --><!-- close product image left -->
</div>
<div class="grid-45 prefix-5 mobile-grid-100 tablet-grid-50 cbp-so-side-right cbp-so-side">


<div align="left">

<!-- entry header -->
<span class="entry-title"><img src="images/UVB_Website_ORDERNOW_TITLE.png" align="left"></span></div>
<header class="entry-header">
<h2 align="center" class="entry-title">&nbsp;</h2>
</header>
<div align="left">
<!-- entry header -->

</div>
<p align="left"></p>
</div>
<section id="newsletter" class="newsletter" style="background-image:url(images/OrderNow-bg2.png)">
<div class="grid-container">
<div class="grid-60 parallax-content"><section id="products" class="product-left cbp-so-section cbp-so-init">
<div class="grid-container">
<div class="grid-100 prefix-5 mobile-grid-100 tablet-grid-100 cbp-so-side-right cbp-so-side">

</div>
<!-- section slider -->
<section class="slider">
<div class="flexslider">

<ul class="slides">
<li data-thumb="">
<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_ORDERNOW_Slide2.png" /></a>
</li>
<li data-thumb="">
<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_ORDERNOW_Slide4a.png" /></a>
</li>
</ul>
</div>
</section><!-- close section slider -->

<div class="grid-100 suffix-5 grid-parent mobile-grid-100 tablet-grid-100">
<div class="grid-50mobile-grid-100 tablet-grid-100">



<th>
<table width="100%" border="1" cellpadding="10">
<tr>
<th align="center"><p><strong>You can now learn from the miracle-worker himself. </strong></p>
<p>
<p>Take home The Ultimate Voice Builder™ and tap into the timeless teachings of the Maestro for a tiny fraction of the fee stars have paid for years. You can benefit NOW from the groundbreaking system that has changed the lives of thousands and shaped the voices of the biggest stars in the music industry; those voices that have entertained you for decades, those stars that have created thousands of your favorite hit songs. </p>
<p>
<p><strong>Discover the amazing Ultimate Voice Builder TODAY!</strong></p></th>
</tr>
</table>
<a href="http://ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_ORDERNOW_Buy_It_Now_Button_3995.png"></a> </th>



<h2 class="newsletter-title">&nbsp;</h2>
<!-- close newsletter form -->

</div><!-- close grid-100 -->
</div><!-- close grid container -->
</section><!-- close parallax banner 1-->

<div class="clear"></div>

<!-- Footer Section -->
<footer class="footer">
<div class="grid-container">

<div class="grid-50 prefix-50 mobile-grid-100 tablet-grid-100">

<!-- footer site branding -->
<div class="site-branding">
<a href="http://www.ultimatevoicebuilder.net/store/index.html"><img src="images/UVB_Website_Logo_Linear.png"></a>


<a href="http://ultimatevoicebuilder.net/Privacy%20Policy.html">Privacy Policy</a> <a href="http://ultimatevoicebuilder.net/Terms%20and%20Conditions.html">Terms & Conditions</a>


</div><!-- close footer site branding -->

<!-- social icons -->
<ul class="social-icons clearfix">

<li>
<a href="https://www.facebook.com/VoiceBuilder">
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-facebook"></i>
</span>
</a>
</li>

<li>
<a href="#">
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
</a>
</li>

<li>
<a href="#">
<span class="icon-stack">
<i class="icon-circle-blank icon-stack-base"></i>
<i class="icon-linkedin"></i>
</span>
</a>
</li>

</ul><!-- close social icons -->

<p class="copyright">Copyright &copy; 2013 <a href="http://www.ultimatevoicebuilder.net/store/index.html">ULTIMATE VOICE BUILDER</a>. <br>All rights reserved.</p>

</div>
</div><!-- close container -->
</footer><!-- close footer -->

<!-- Load Javascript
================================================== -->
<script src="js/jquery.parallax.min.js"></script>
<script src="js/froogaloop.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>

<script src="js/classie.js"></script>
<script src="js/cbpScroller.js"></script>


<script src="js/jquery.custom.js"></script>

<script type="text/javascript">
/* <![CDATA[ */

(function($){

"use strict";

$(document).ready(function(){


});

})(jQuery);

/* ]]> */
</script>

<!-- End Document
================================================== -->
</body>
</html>
Jason Forbe
Can anyone assist on the embeded video from vimeo onto the site to be viewable on Safari and IE?
Frederiek
Can you post the url to the page demonstrating the problem?

The video does work in Safari (Mac) using a copy of your code.
You might like to look into http://camendesign.com/code/video_for_everybody .
Jason Forbe
www.ultimatevoicebuilder.com

<iframe id="player_1" src="http://player.vimeo.com/video/78695612?api=1&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Frederiek
Try fixing the HTML errors found by the W3C validator (for HTML5): http://validator.w3.org/check?uri=http%3A/...icebuilder.net/
While you're add it, fix (as far as possible) the CSS too: http://jigsaw.w3.org/css-validator/validat...icebuilder.net/
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.