Youtube embed appearing on every page

Report · May 05, 2019

Hi everyone,

I'm really new to coding and I'm not very good at it. I have a problem where when I embed a youtube video on the landing page for my website, it appears on every other page on the site. I was hoping someone could could help me figure out what I'm doing wrong.

Thank you

Ismail

Report · May 05, 2019

The answer lies in the code. Please upload the site to a (temporary) remote server so that we can see what you have done. Alternatively, copy nd paste your code here.

Wappler, the only real Dreamweaver alternative.

Report · May 05, 2019

I've been using a template that I found online so I don't know if this makes a difference. In any case here's the code.

<!DOCTYPE html>

<html class="no-js">

<head>

<title>GHOST Creative Website</title>

</head>

<body>

<!--[if lt IE 7]>

<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a rel="nofollow" href="http://browsehappy.com">upgrade your browser</a> or <a rel="nofollow" href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>

<![endif]-->

<a href="#">GHOST Creatives</a><img src="images/btn-menu.png" alt="main menu" id="m-btn" class="pull-right visible-xs visible-sm">

</h1>

</div>

</ul>

</div>

<li class="about-menu"><a href="#about">Productions</a></li>

<li class="services-menu"><a href="#services">Publications</a></li>

<li class="testimonial-menu"><a href="#testimonial">Records</a></li>

<li><a rel="nofollow" target="_parent" href="https://www.youtube.com/channel/UCFmIg3yNJx3ZIw70uLhuMfQ" class="external">Youtube Channel</a></li>

<li class="contact-menu"><a href="#contact">Contact</a></li>

</ul>

</div>

</div>

<h2>Welcome to GHOST Creatives</h2>

<p>Through film, books and music we tell the best tales in all formats. A place where quality over quantiy is assured.</p>

<p>Run by artists for artists, creative freedom is our number one priority.</p>

</div>

</section>

<h2 class="text-center">GHOST Productions</h2>

<p>The film branch of our company deals with all sorts of productions, from films and music videos to corporate videos and advertising. We create all of these to the highest quality.</p>

</div>

<p>The original (and continued) purpose of this branch is to provide younger and smaller filmmakers the oppurtunites to create their own films and see their visions come to life.</p>

</div>

</section>

<h2 class="text-center">GHOST Publications</h2>

<h3>Novels</h3>

<p>Novels have always been a passion of ours, and this passion has spread to the creation of this branch to publish novels for everyone because everyone deserves to have their story told.</p>

</div>

<h3>Comic books</h3>

<p>Comics and art in general are fascinating to look at. Telling stories through this medium is something that has been and will always be desired, no matter the time or age.</p>

</div>

<h3>Graphic Novels</h3>

<p>Darker and grittier but no less loved, this medium will stand the test of time and always improve with the addition of animated graphic novels, a venture we're looking forward to expand.</p>

</div>

</section>

<h2>GHOST Records</h2>

<p>Music will always be a part of us but GHOST Records doesn't just deal with that. We look at all sounds, including sound effects and want to have a place where all of these can be stored and used for everyone.</p>

<p>However music will always be something we love venturing in to. For new and upcoming artists to have a place where they can gain a faithful and passionate following, we want everyone to keep creating these songs that are loved by everyone.</p>

</div>

</section>

<div class="col-sm-12 col-md-12"><h2>Contact</h2></div>

</div>

<p>990 Digital Street, New Forest Area, San Francisco, CA 10660</p>

</div>

</div>

</div>

</div>

</form>

</div>

</div>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Report · May 05, 2019

I do not see anything unusual with the code that you have shown, nothing that should cause a problem in an other page. Please show the code of the second page.

Wappler, the only real Dreamweaver alternative.

Report · May 05, 2019

That's all the code there is (that I can see anyway) The rest of is the bootstrap, js and css things (I think)

Report · May 05, 2019

Like Ben I cant see anything in the code you posted that would duplicate the video in other pages.

Just check the js file to make sure its not writing the code to the page:

Report · May 05, 2019

This is all I can see in the js file and I can't see anything that would duplicate the video.

Sorry for all the hassle. I really appreciate your help.

var menuDisabled = false;

jQuery(function($) {

$(window).load(function() { // makes sure the whole site is loaded

$('#status').fadeOut(); // will first fade out the loading animation

$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.

$('#main-wrapper').delay(350).css({'overflow':'visible'});

});

$(document).ready( function() {

loadGoogleMap();

// backstretch for background image

var defaultImgSrc = $('img.main-img').attr('src');

$.backstretch(defaultImgSrc, {speed: 500});

// for responsive-menu

$("#m-btn").click(function(){

$("#responsive").toggle();

});

// copy menu list to responsive menu

var mainMenuList = $('#menu-list').html();

$('#responsive').html(mainMenuList);

//for image slide on menu item click(normal) and responsive

$("#menu-list a, #responsive a").on('click',function(e){

if(this.className == "external") {

return;

}

e.preventDefault();

if (menuDisabled == false) // check the menu has disabled?

{

menuDisabled = true; // disable to menu

var name = $(this).attr('href');

$('#menu-list li').removeClass('active');

$('#responsive li').removeClass('active');

// set active to both menu

var menuClass = $(this).parent('li').attr('class');

$('.'+menuClass).addClass('active');

// hide responsive menu

$("#responsive").hide();

// get image url and assign to backstretch for background

var imgSrc = $("img"+name+"-img").attr('src');

$.backstretch(imgSrc, {speed: 500}); //backstretch for background fade in/out

// content slide in/out

$("section.active").animate({left:$("section.active").outerWidth()}, 400,function(){

$(this).removeClass("active");

$(this).hide();

$(name+"-text").show();

$(name+"-text").animate({left:'0px'},400,function(){

$(this).addClass("active");

google.maps.event.trigger(map, 'resize'); // resize map

$.backstretch("resize"); // resize the background image

menuDisabled = false; // enable the menu

});

}

return;

});

var map = '';

function initialize() {

var mapOptions = {

zoom: 14,

center: new google.maps.LatLng(37.769725, -122.462154)

};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

}

function loadGoogleMap(){

// load google map

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +

'callback=initialize';

document.body.appendChild(script);

}

Report · May 05, 2019

There's nothing in that file which is loading a youtube video.

The code in your initial page is junk, where did you get that from, template monster?

Why all the duplicated <h1></h1> tags which contain nothing and your <iframe> should not go inside an <h1></h1> tag.

Report · May 05, 2019

Yes it was from one of those template sites. I'm not sure how to write code so the templates are the next best thing for me. How would I fix it if you don't mind me asking?

Report · May 05, 2019

ismaila62471764 wrote
Yes it was from one of those template sites. I'm not sure how to write code so the templates are the next best thing for me. How would I fix it if you don't mind me asking?

For a start you would remove all the empty <h1></h1> tags:

and your youtube iframe would be best suited wrapped in just a <div></div> tag rather than an <h1></h1>:

<div>

<div>

But that doesnt answer the question why you are seeing your youtube video on every page, unless it is on every page, in the code.

Report · May 05, 2019

That seems to have done the trick! Thank you! It's now on the landing page but now I can't seem to move it into position, It's stuck in the textbox with the other writing.

Is there a way of moving it from that box into its own position?

Report · May 05, 2019

It's not possible to help when just seeing an image. You need to upload the page somewhere and provide a link. Also I would not work in Dreamweaver design or live view, what ever view that is you posted. View the page in a browser and see what it looks like.

Its highly unlikely unless you know some code and have the abiliy to manipulate the code in code view that you can get this done.

Report · May 05, 2019

I've uploaded all the project files to this dropbox to make it easier.

https://www.dropbox.com/sh/0fslrnl8st3sx1c/AABPPWmk2CFPSOdEJ0GQoZyoa?dl=1

I hope this helps. What sort of code would you recommend learning to make these sorts of manipulations? I know very basic html from when I did computer science in school but that's the bare minimum.

Report · May 05, 2019

ismaila62471764 wrote
I know very basic html from when I did computer science in school but that's the bare minimum.

If you know basic html then you should know that elements just follow each other in the code. If they follow each other they will sit underneath one another, unless you apply some css styling which changes their position.

So if you have code set up like below:

<h1>My header</h1>

<p>Paragraph 1</p>

</div>

<p>Paragraph 2</p>

</div>

<div>

<div>

</div>

All elements will naturallly follow on. Just layout a page in a simple linear format then style the elements, so if I want the 2 paragraph <divs> to sit side by side I would wrap them in a tag:

<p>paragraph 1</p>

</div>

<p>paragraph 2</p>

</div>

</section>

Then use some css styling to place the 2 <divs> side by side

.my-paragraphs {

display: flex;

},

.p1, .p2 {

width: 50%;

}

That's all there is to laying out a page if you apply simple logic. There's no real mystery, you just need to know some basic html and css styling, without it there is little chance you can change a template or build your own simple construction.

Report · May 05, 2019

You will not learn much from using somebody else's poorly coded templates except how NOT to build websites. Also the latest Bootstrap 4 uses CSS flexbox for layouts, not floats. So your template is already outdated. I would get rid of it.

Learn to work with code. Read the chapters, work with code examples, take quizzes at the end.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Youtube embed appearing on every page

1 Correct answer