I am working on a website (non cms) for client that is a parallax site, as soon as I add youtube embed code which is <iframe> the site just shows its loading animation on the screen. Has anyone else had an issue with this?
nufftalon 0 Junior Poster in Training
gabrielcastillo 40 Web Developer
Do you have a link or can you show the code?
nufftalon 0 Junior Poster in Training
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link href='http://fonts.googleapis.com/css?family=BenchNine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css">
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/scripts.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
</div>
<![endif]-->
</head>
<body>
<div class="glob">
<div id="bgStretch"><img src="images/preview_1.jpg" alt=""></div>
<div class="page_spinner"><span></span></div>
<div class="_cover"></div>
<!--header -->
<header>
<div class="header_content">
<div class="logoHolder">
<h1><a class="hide_text" href="#!/pageSplash" id="logo"></a></h1>
</div>
<div class="menuHolder">
<span class="extraBg1"></span>
<nav class="menu">
<ul id="menu">
<li>
<a href="#!/pageSplash">
<div class="mText">splash</div>
</a>
</li>
<li class="_first">
<a href="#!/pageMain">
<div class="mText">main page</div>
</a>
</li>
<li >
<a href="#!/pageAbout">
<div class="mText">about us</div>
</a>
</li>
<li class="with_ul">
<a href="#!/pageFashion">
<div class="mText">fashion</div>
</a>
<ul class="submenu_1">
<li class="_first"><a href="#!/pageMore">what's new</a></li>
<li>
<a href="#!/pageMore">hot trends</a>
<ul class="submenu_2">
<li class="_first"><a href="#!/pageMore">lorem</a></li>
<li class="_last"><a href="#!/pageMore">ipsum dolor</a></li>
</ul>
</li>
<li><a href="#!/pageMore">most popular</a></li>
<li class="_last"><a href="#!/pageMore">gallery</a></li>
</ul>
</li>
<li>
<a href="#!/pageCollections">
<div class="mText">collections</div>
</a>
</li>
<li class="_last">
<a href="#!/pageContact">
<div class="mText">contacts</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!--header end-->
<div class="main">
<div class="center">
<!--content -->
<article id="content">
<ul>
<li id="pageSplash">
<div class="slider_holder">
<div id="jcarousel_1">
<ul>
<li class="active">
<a href="images/preview_1.jpg">
<span></span>
<img src="images/thumbnail_1.jpg" alt="">
</a>
</li>
<li>
<a href="images/preview_2.jpg">
<span></span>
<img src="images/thumbnail_2.jpg" alt="">
</a>
</li>
<li>
<a href="images/preview_3.jpg">
<span></span>
<img src="images/thumbnail_3.jpg" alt="">
</a>
</li>
<li>
<a href="images/preview_4.jpg">
<span></span>
<img src="images/thumbnail_4.jpg" alt="">
</a>
</li>
<li>
<a href="images/preview_5.jpg">
<span></span>
<img src="images/thumbnail_5.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="_controls">
<a href="#" class="prevBtn"><img src="images/sprite_prev_btn.png" alt=""></a>
<a href="#" class="nextBtn"><img src="images/sprite_next_btn.png" alt=""></a>
</div>
</div>
</li>
<li id="pageMain">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<div class="grid_11 divSet1">
<div class="wrapper">
<h2>FASHION IS OUR BUSINESS</h2>
<img class="_image1" src="images/page1pic1.jpg" alt="">
<a class="_link3" href="#">M Dzyn is more then just clothing, our brand is a way for you to be free and enjoy life.</a>
<p class="padNull">We believe in making trendsetting designs on our cloth on an international level.</p>
</div>
</div>
<div class="grid_11">
<div class="wrapper">
<h2>Latest Media</h2>
<ul class="_list1">
<li>
<div class="wrapper">
<img class="_image2" src="images/page1pic2.jpg" alt="">
<a class="_link3 margin1" href="#">Dancers keeping pace despite "Overload":</a>
<p>April 2014 News Article</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</li>
<li>
<div class="wrapper">
<img class="_image2" src="images/page1pic3.jpg" alt="">
<a class="_link3 margin1" href="#">Ginjah cries foul, demands more love from media.</a>
<p>May 2014 News Article</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</li>
</ul>
<a href="#!/pageMore" class="_link4">more news</a>
</div>
</div>
<div class="grid_24 padding1">
<ul class="_list2">
<li>
<img src="images/page1pic4.jpg" alt="">
<a href="#">HATS</a>
</li>
<li>
<img src="images/page1pic5.jpg" alt="">
<a href="#">TEES</a>
</li>
<li>
<img src="images/page1pic6.jpg" alt="">
<a href="#">TRENDS</a>
</li>
<li class="marNull">
<img src="images/page1pic7.jpg" alt="">
<a href="#">COLLECTIONS</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li id="pageAbout">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<div class="grid_11 divSet1">
<div class="wrapper">
<h2>Brand Identity</h2>
<ul class="_list1">
<li>
<div class="wrapper">
<img class="_image2" src="images/page2pic1.jpg" alt="">
<a class="_link3 margin1" href="#">Quisque tincidunt dictum.</a>
<p>Maecenas semper ligula nisi, vitae maecenas eget nulla sed dui interdum sed ante facilisis consequat. Aliquam est sapien, consequat quis vestibulum iaculis; tempor et urna.</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</li>
<li>
<div class="wrapper">
<img class="_image2" src="images/page2pic2.jpg" alt="">
<a class="_link3 margin1" href="#">Nam ornare dolor acumsan.</a>
<p>Quisque tincidunt dictum nisi nec odio volutpat nec nulla! Phasellus sagittis venenatis mi, eget blandit massa porta dolor sit amet, consectetur adipiscing elit.Maecenas quis lorem.</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</li>
</ul>
</div>
</div>
<div class="grid_11">
<div class="wrapper padding2">
<h2>Brand Advertising</h2>
<ul class="_list3">
<li><a href="#">Praesent vestibulum estie lacus aenean nonummy hendrerit</a></li>
<li><a href="#">Phasellus porta dusce suscipit varius mi</a></li>
<li><a href="#">Cum sociis natoque penatibus et magnis dis parturien</a></li>
<li><a href="#">Maecenas tristique orci ac sem</a></li>
<li><a href="#">Duis donec accumsan malesuada orci</a></li>
</ul>
</div>
<div class="wrapper">
<h2> Brand Marketing Communications</h2>
<div class="wrapper">
<img class="_image2" src="images/_icon1.png" alt="">
<div class="wrapper">
<p>Praesent vestibulum tie lacus. Aenean nonummy hendrerit mauris. penatibus et magnis.dis parturient montes, nascetur ridiculus mus. malesuada odio. Maecenas tristique orci.</p>
<p>Duis ultricies pharetra magnec accumsan lorem ipsum sit amet, nsectetuer adipiscing elit. Mauris fermentum dictum magna.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li id="pageFashion">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<div class="grid_11 divSet1">
<div class="wrapper">
<h2>Summer Fashion</h2>
<p>Praesent vestibulum tie lacus. Aenean nonummy hendrerit mauris. Phasellus porta. Fusce suscipit varius mi. Cum sociis natoque penatibus et magnis. dis parturient montes, nascetur ridiculus mus. Nulla dui.</p>
<ul class="_list4">
<li>
<img class="_image1" src="images/page3pic1.jpg" alt="">
<a href="#" class="_link3">Praesent vestibulum estie lacus, nean nonummy hendrerit.</a>
<p>Nam dui lorem, adipiscing nec lcinia egestas in imperdiet ante. Fus quis leo, nec mattis tortor.</p>
</li>
<li class="marNull">
<img class="_image1" src="images/page3pic2.jpg" alt="">
<a href="#" class="_link3">Etiam leo ligula, tincidunt.</a>
<p>Morbi et mauris turpis; vel rutrum libe pharetra fringilla odio, vitae mattis nu nc semper a. Etiam leo igula, tincidunt titor a, hendrerit at est.</p>
</li>
</ul>
</div>
</div>
<div class="grid_11">
<div class="wrapper padding2">
<h2>New Trends</h2>
<ul class="_list1">
<li>
<div class="wrapper">
<div class="_icon">
<span>a</span>
</div>
<div class="wrapper">
<a class="_link3 margin1" href="#">Praesent vestibulum estie lacus.</a>
<p>Sed sed tellus metus, non rutrum odio! Nunc dui justo, euismod eleifend lacinia quis, auctor vitae orci. Suspendisse lacus.</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</div>
</li>
<li>
<div class="wrapper">
<div class="_icon">
<span>b</span>
</div>
<div class="wrapper">
<a class="_link3 margin1" href="#">Suspendisse at tellus porttitor.</a>
<p>Sed sed tellus metus, non rutrum odio! Nunc dui justo, euismod eleifend lacinia quis, auctor vitae orci. Suspendisse lacus.</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</div>
</li>
<li class="marNull">
<div class="wrapper">
<div class="_icon">
<span>c</span>
</div>
<div class="wrapper">
<a class="_link3 margin1" href="#">Nam dui lorem, adipiscing nec.</a>
<p>Sed sed tellus metus, non rutrum odio! Nunc dui justo, euismod eleifend lacinia quis, auctor vitae orci. Suspendisse lacus.</p>
<a href="#!/pageMore" class="more">more</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li id="pageCollections">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<h2>collection summer 2012</h2>
<div class="grid_18">
<div class="wrapper">
<img class="_left margin2" src="images/page4pic1.jpg" alt="">
<div class="grid_8">
<a class="_link3 margin1" href="#">Fusce suscipit varius mi.</a>
<p>Aenean dapibus mi tincidunt leo volutpat elementum. Integer vestibulum tempus nisl ac tristique. Etiam tempor enim id nisl rutrum in rhoncus lorem tincidunt? Nam ultrices mi et tortor consequat sed facilisis sem.</p>
<ul class="_list3">
<li><a href="#">Donec sit amet eros</a></li>
<li><a href="#">Fermentum dictum magna sed laoreet</a></li>
<li><a href="#">Ut tellus dolor dapibus eget, elementum</a></li>
<li><a href="#">Vel cursus eleifend, elit</a></li>
<li><a href="#">Aenean auctor wisi et urna aliquam erat</a></li>
<li><a href="#">Suspendisse non metus enim eu suscipit</a></li>
<li><a href="#">Dui ut nec ultrices odio</a></li>
</ul>
</div>
</div>
</div>
<div class="grid_6">
<div class="wrapper">
<div class="scroll1">
<div class="_inner">
<a class="pic" rel="Appendix" href="images/image-blank.png">
<span class="zoomSp"></span>
<img class="margin3" src="images/page4pic2.jpg" alt="">
</a>
<a class="pic" rel="Appendix" href="images/image-blank.png">
<span class="zoomSp"></span>
<img class="margin3" src="images/page4pic3.jpg" alt="">
</a>
<a class="pic" rel="Appendix" href="images/image-blank.png">
<span class="zoomSp"></span>
<img class="margin3" src="images/page4pic4.jpg" alt="">
</a>
<a class="pic" rel="Appendix" href="images/image-blank.png">
<span class="zoomSp"></span>
<img src="images/page4pic2.jpg" alt="">
</a>
</div>
</div>
<div class="scroll-btns">
<a href="#" data-type="scrollUp" class="up_btn"><img src="images/sprite_up_btn.png" alt=""></a>
<a href="#" data-type="scrollDown" class="down_btn"><img src="images/sprite_down_btn.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li id="pageContact">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<div class="grid_11 divSet1">
<div class="wrapper">
<h2>Contact Information</h2>
<div class="wrapper">
<figure class="google_map"><span></span></figure>
</div>
<div class="grid_5 margin4">
<p>8901 Marmora Road,<br>Glasgow, D04 89GR.<br>
<span class="space1">Freephone:</span>+1 800 559 6580<br>
<span class="space1">Telephone:</span>+1 959 603 6035<br>
<span class="space1">FAX:</span>+1 959 603 6035<br>
E-mail: <a class="_link2" href="mailto:">mail@demolink.org</a></p>
</div>
<div class="grid_5">
<p>9863 - 9867 Mill Road,<br>Cambridge, MG09 99HT.<br>
<span class="space1">Freephone:</span>+1 800 559 6580<br>
<span class="space1">Telephone:</span>+1 959 603 6035<br>
<span class="space1">FAX:</span>+1 959 603 6035<br>
E-mail: <a class="_link2" href="mailto:">mail@demolink.org</a></p>
</div>
</div>
</div>
<div class="grid_11">
<div class="wrapper">
<h2>Get in Touch</h2>
<form action="#" id="ContactForm">
<div class="success"><span>Contact form submitted!<br>We will be in touch soon.</span></div>
<fieldset class="_field_set _left">
<div class="block">
<label class="name">
<span class="bg"><input type="text" value="Name:" class="input marNone"></span>
<span class="error w1">*This is not a valid name.</span> <span class="empty w1">*This field is required.</span>
</label>
<label class="email">
<span class="bg"><input type="email" value="E-mail:" class="input marNone"></span>
<span class="error w1">*This is not a valid email address.</span><span class="empty w1">*This field is required.</span>
</label>
<label class="phone">
<span class="bg"><input type="tel" value="Phone:" class="input marNone"></span>
<span class="error w1">*This is not a valid number.</span><span class="empty w1">*This field is required.</span>
</label>
</div>
<div class="block">
<label class="message">
<span class="bg"><textarea rows="1" cols="2">Message:</textarea></span>
<span class="error top1">*The message is too short.</span> <span class="empty top1">*This field is required.</span>
</label>
</div>
<div class="formButtons">
<div class="formBtn">
<a href="#" data-type="reset" class="more">Clear</a>
</div>
<div class="formBtn">
<a href="#" data-type="submit" class="more">Send</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</li>
<li id="pagePrivacy">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<div class="grid_24">
<div class="wrapper">
<h2>Privacy Policy</h2>
<a class="_link3" href="#">Nullam lacinia, odio sed dignissim luctus, tortor nisi sollicitudin urna, ut dignissim ligula lectus at nisi. Mauris eget odio ut risus.</a>
<p>Suspendisse facilisis erat vel diam euismod sit amet rhoncus est placerat. Nunc lobortis, arcu eget aliquam luctus, sem nulla pellentesque arcu, vestibulum feugiat augue consectetur eu ac dui. Nullam lacinia, odio sed dignissim luctus, tortor nisi sollicitudin urna, ut dignissim ligula lectus at nisi. Mauris eget odio ut risus rutrum vulputate.Ut dolor elit, sollicitudin vel pharetra sit amet, varius sit amet felis. Ut placerat molestie accumsan. Sed ligula sem, lacinia sit amet cursus ac, convallis ac nulla. Fusce lobortis convallis facilisis. Cras tincidunt, nunc vel congue pretium, odio tellus imperdiet neque; id sodales ante dolor sed tortor. Donec nisi orci, tincidunt vel laoreet eu, faucibus nec arcu. Curabitur quis molestie eros. Pellentesque felis ipsum; feugiat vitae dignissim eget, condimentum in nunc. Quisque scelerisque elementum dui, id aliquet urna varius pellentesque velit eu turpis congue sed bibendum urna porta. Proin a velit vestibulum neque porta iaculis.Nunc egestas justo leo! Vivamus at erat ac lacus convallis auctor. Nunc commodo libero ac erat semper ac porttitor odio adipiscing? Praesent vel nisl nisl. Phasellus lacinia, velit at aliquet placerat, lacus ligula dictum nunc, in commodo mi nibh eget mi. Ut pellentesque quam eget sem feugiat cursus! Nunc molestie laoreet velit, molestie pellentesque ligula vestibulum vitae. Aliquam vel eros eu elit mollis.</p>
<a class="_link3" href="#">Mauris posuere arcu at odio gravida consectetur. Nulla nisi velit, semper vel sollicitudin at, commodo non turpis mauris vel urna ac quam.</a>
<p>Ut placerat molestie accumsan. Sed ligula sem, lacinia sit amet cursus ac, convallis ac nulla. Fusce lobortis convallis facilisis. Cras tincidunt, nunc vel congue pretium, odio tellus imperdiet neque; id sodales ante dolor sed tortor. Donec nisi orci, tincidunt vel laoreet eu, faucibus nec arcu. Curabitur quis molestie eros. Pellentesque felis ipsum; feugiat vitae dignissim eget, condimentum in nunc. Quisque scelerisque elementum dui, id aliquet urna varius pellentesque velit eu turpis congue sed bibendum urna porta. Proin a velit vestibulum neque porta iaculis.Nunc egestas justo leo! Vivamus at erat ac lacus convallis auctor. Nunc commodo libero ac erat semper ac porttitor odio adipiscing? Praesent vel nisl nisl. Phasellus lacinia, velit at aliquet placerat, lacus ligula dictum nunc, in commodo mi nibh eget mi. Ut pellentesque quam eget sem feugiat cursus! Nunc molestie laoreet velit, molestie pellentesque ligula vestibulum vitae. Aliquam vel eros eu elit mollis. fringilla. Suspendisse facilisis erat vel diam euismod.</p>
<p class="padNull"><a class="_link2" href="mailto:">privacy@demolink.org</a></p>
</div>
</div>
</div>
</div>
</div>
</li>
<li id="pageMore">
<div class="box1">
<div class="containerContent1">
<div class="container_24">
<div class="grid_24">
<div class="wrapper">
<h2>Latest Media Archives</h2>
<table width="800" border="1">
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"><a class="_link3" href="#">September 2014 Phoenix Mag</a><img src="images/news_archive/september2014.jpg"/></td>
</tr>
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr>
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr><tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr>
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr><tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr>
<tr>
<td width="176"></td>
<td width="8"> </td>
<td width="331"><a class="_link3" href="#">May 2014 News Article</a><img src="images/news_archive/may2014.jpg"/></td>
</tr>
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr>
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr><tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr>
<tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr><tr>
<td width="176"> </td>
<td width="8"> </td>
<td width="331"> </td>
</tr>
<tr>
<td width="176"></td>
<td width="8"> </td>
<td width="331"><a class="_link3" href="#">April 2014 News Article</a><img src="images/news_archive/april2014.jpg"/></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</article>
<!--content end-->
</div>
</div>
<!--footer -->
<footer>
<div class="privacyHolder">
<pre class="textPrivacy">M DZYN © 2014 | All Rights Reserved | <a class="_link1" href="#!/pagePrivacy">Privacy Policy</a></pre>
<ul class="follow_list">
<li><a href="https://twitter.com/MdzynJamaica"><img src="images/social_icon1.png" alt=""></a></li>
<li><a href="https://www.facebook.com/MdzynJamaica"><img src="images/social_icon2.png" alt=""></a></li>
<li><a href="https://plus.google.com/+MDZYN/posts"><img src="images/social_icon3.png" alt=""></a></li>
<li><a href="#"><img src="images/social_icon4.png" alt=""></a></li>
</ul>
</div>
</footer>
<!--footer end-->
</div>
<!-- Coded by Shin -->
</body>
</html>
nufftalon 0 Junior Poster in Training
This is the code above I tookthe embed video out but basically I was just puttng it in the about us section nested in a div.
diafol
It would be better if you had a link with the iframe in it so we could see it working.
gabrielcastillo 40 Web Developer
Agreed with diafol, it would be better if we can see your working code.. Right now i can't see your css or your js. This is mainly because parallax dependent on css and js.
nufftalon 0 Junior Poster in Training
Just uploaded to the server...actually its working fine which is weird. When I preview it locally it doesn't load in browser. http://mdzynjamaica.com/demo if you click "About Us" in menu you will see the video. What is causing that though?
gabrielcastillo 40 Web Developer
The problem on your local is the paths to your asset files.(js,css).. I believe if you use FQDN or put a forward slash before the assets it should work on your local.
Example: <script src="/js/scripts.js"></script> or <script src="http://localhost/js/scripts.js"></script>
nufftalon 0 Junior Poster in Training
I understand, thank you for the help really appreciate it.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.