Highlighted

Youtube embed appearing on every page

New Here ,
May 05, 2019

Copy link to clipboard

Copied

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

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:

<h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1>

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

<div>

<iframe width="900" height="315" src="https://www.youtube.com/embed/ngW6XSAUwxc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<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.

Views

164

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Youtube embed appearing on every page

New Here ,
May 05, 2019

Copy link to clipboard

Copied

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

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:

<h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1>

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

<div>

<iframe width="900" height="315" src="https://www.youtube.com/embed/ngW6XSAUwxc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<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.

Views

165

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 05, 2019 0
Adobe Community Professional ,
May 05, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 1
New Here ,
May 05, 2019

Copy link to clipboard

Copied

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>

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->

<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->

<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

    <head>

        <meta charset="utf-8">

        <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->

        <title>GHOST Creative Website</title>

        <meta name="keywords" content="" />

        <meta name="description" content="" />

        <meta name="viewport" content="width=device-width">

       

        <!-- Google Web Font Embed -->

        <link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>

       

        <link rel="stylesheet" href="css/bootstrap.min.css">

        <link rel="stylesheet" href="css/templatemo_main.css">

    </head>

    <body>

        <div id="main-wrapper">

            <!--[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]-->

            <div class="col-md-12 col-sm-12 col-xs-12 affix text-center col-lg-12" style="z-index: 1;">

              <h1 class="templatemo-site-title">

                        <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>

                <ul id="responsive" style="display:none" class="hidden-lg hidden-md"></ul><!-- /.responsive -->

            </div>

          <div class="col-md-12 col-sm-12 col-xs-12 affix text-center col-lg-6" style="z-index: 1;">

              <h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"><iframe width="900" height="315" src="https://www.youtube.com/embed/ngW6XSAUwxc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></h1>

              <ul id="responsive2" style="display:none" class="hidden-lg hidden-md">

              </ul>

              <!-- /.responsive -->

            </div>

            <div class="menu visible-md visible-lg">

                <ul id="menu-list">

                    <li class="active home-menu"><a href="#home">Home</a></li>

                    <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><!-- /.menu -->

            <div class="image-section">

                <div class="image-container">

                    <img src="images/nature1.jpg" id="home-img" class="main-img inactive" alt="Home">

                    <img src="images/nature2.jpg" id="about-img" class="inactive" alt="About">

                    <img src="images/nature3.jpg" id="services-img"  class="inactive" alt="Services">

                    <img src="images/nature4.jpg" id="testimonial-img" class="inactive" alt="Testimonial">

                    <img src="images/nature5.jpg" id="contact-img" class="inactive" alt="Contact">

                </div>

            </div>

          <div class="row">

              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-6 col-md-offset-6 templatemo-content-wrapper">

                    <div class="templatemo-content">

                       

                        <section id="home-text" class="active templatemo-content-section">

                   

                          <div class="col-sm-12 col-md-12 col-lg-12">

                              <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><!-- /.home-text -->   

                        <section id="about-text" class="inactive">

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

                          <div class="col-sm-6 col-md-6">

                            <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>

                            <div class="col-sm-6 col-md-6">

                              <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><!-- /.about-text -->

                        <section id="services-text" class="inactive">

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

                          <div class="col-sm-4 col-md-4">

                            <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>

                            <div class="col-sm-4 col-md-4">

                              <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>

                            <div class="col-sm-4 col-md-4">

                              <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><!-- /.services-text -->

                        <section id="testimonial-text" class="inactive">

                            <div class="col-sm-12 col-md-12">

                              <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><!-- /.testimonial-text -->

                      <section id="contact-text" class="inactive">

                            <div class="col-sm-12 col-md-12">

                                <div class="row">

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

                                    <div class="clearfix"></div>

                                </div>

                               

                                <div class="row">

                                    <div class="col-sm-6 col-md-6">

                                        <div id="map-canvas"></div>

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

                                    </div>

                                    <div class="col-sm-6 col-md-6">

                                        <form action="#" method="post">

                                                <div class="form-group">

                                                    <!--<label for="contact_name">Name:</label>-->

                                                    <input type="text" id="contact_name" class="form-control" placeholder="Name" />

                                                </div>

                                                <div class="form-group">

                                                    <!--<label for="contact_email">Email:</label>-->

                                                    <input type="text" id="contact_email" class="form-control" placeholder="Email Address" />

                                                </div>

                                                <div class="form-group">

                                                    <!--<label for="contact_message">Message:</label>-->

                                                    <textarea id="contact_message" class="form-control" rows="7" placeholder="Write a message"></textarea>

                                                </div>

                                                <button type="submit" class="btn btn-primary">Send</button>

                                        </form>

                                    </div>

                                   

                                    <div class="clearfix"></div>

                                </div>

                            </div>

                      </section><!-- /.contact-text -->

                    </div><!-- /.templatemo-content --> 

            </div><!-- /.templatemo-content-wrapper -->

            </div><!-- /.row -->

            <div class="row">

                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 footer">

                  <p class="footer-text"> <span>Copyright &copy; 2019 GHOST Creatives ltd</span></p>

                </div><!-- /.footer -->

            </div>

    </div><!-- /#main-wrapper -->

       

        <div id="preloader">

            <div id="status"> </div>

        </div><!-- /#preloader -->

       

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

        <script src="js/jquery.backstretch.min.js"></script>

        <script src="js/templatemo_script.js"></script>

        <!-- templatemo 398 nature -->

    </body>

</html>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
Adobe Community Professional ,
May 05, 2019

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
New Here ,
May 05, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
LEGEND ,
May 05, 2019

Copy link to clipboard

Copied

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:

<script src="js/templatemo_script.js"></script>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
New Here ,
May 05, 2019

Copy link to clipboard

Copied

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);

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
LEGEND ,
May 05, 2019

Copy link to clipboard

Copied

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?

<h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"><iframe width="900" height="315" src="https://www.youtube.com/embed/ngW6XSAUwxc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></h1>

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
New Here ,
May 05, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
LEGEND ,
May 05, 2019

Copy link to clipboard

Copied

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:

<h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1><h1 class="templatemo-site-title"> </h1>

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

<div>

<iframe width="900" height="315" src="https://www.youtube.com/embed/ngW6XSAUwxc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 1
New Here ,
May 05, 2019

Copy link to clipboard

Copied

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. Site.png

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
LEGEND ,
May 05, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
New Here ,
May 05, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
LEGEND ,
May 05, 2019

Copy link to clipboard

Copied

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:

<div class="page-wrapper">

<h1>My header</h1>

<div class="p1">

<p>Paragraph 1</p>

</div>

<div class="p2">

<p>Paragraph 2</p>

</div>

<div>

<iframe></iframe>

<div>

</div>

<!-- end page-wrapper -->

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:

<section class="my-paragraphs">

<div class="p1">

<p>paragraph 1</p>

</div>

<div class="p2">

<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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 0
Adobe Community Professional ,
May 05, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 1