Skip to main content
christineavatar
christineavatar
Legend
December 23, 2017
Answered

Make Dreamweaver launch a new window

  • December 23, 2017
  • 6 replies
  • 2055 views

Hello,

I am working in Dreamweaver 2018. I have a page of 30 second videos I want to have play but leave the Dreamweaver page open. Right now I have it rigged to play a youtube video I have but it leaves the page you're on. I want to have the page stay and a new page open to play the video. How can I do that?

    This topic has been closed for replies.
    Correct answer osgood_

    If you just want a new document to open use the 'target blank' anchor tag attribute, that will open a new page and keep your original page open in the bacground.

    Search Google for 'target blank anchor tag'. Im in the pub at the moment and only have access to a dumb smartphone so cant type much.

    I think the below is correct:

    <a href="page_to_open.html" target="_blank">Word</a>

    Showing the videos associated with the words in a modal window is a  more elegant, modern and compact approach but maybe thats not an approach you wish to take at this time.

    6 replies

    christineavatar
    christineavatarAuthor
    Legend
    December 28, 2017

    We did it!

    Animation

    It seems that all I needed to do was add the two simple words 'target="_blank"' and that did the trick! The new page opens up and shows the youtube video. Thank you all very much!

    christineavatar
    christineavatarAuthor
    Legend
    December 27, 2017

    I have tried both of these suggestions and neither one does what I want. What I am trying to do is have the word, just the word, on the page; have a viewer select it and have the response be to open the definition on a new page. What I have now is when one selects the word it takes the viewer off my site completely and over to youtube. The viewer would then have to find my site again to view another word - which will take them off site again.

    All I want is to set up the words (up to a count of 24 at present) to trigger a new page to open with the definition on the new page with my page still visible. There must be a way≥

    O
    osgood_Correct answer
    Legend
    December 27, 2017

    If you just want a new document to open use the 'target blank' anchor tag attribute, that will open a new page and keep your original page open in the bacground.

    Search Google for 'target blank anchor tag'. Im in the pub at the moment and only have access to a dumb smartphone so cant type much.

    I think the below is correct:

    <a href="page_to_open.html" target="_blank">Word</a>

    Showing the videos associated with the words in a modal window is a  more elegant, modern and compact approach but maybe thats not an approach you wish to take at this time.

    christineavatar
    christineavatarAuthor
    Legend
    December 27, 2017

    The top one is the only one I have changed so far. I have at least twenty but I must make it work first. The lower one is the header.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 27, 2017

    Copy and paste the fowwowing into a new document and view in browser

    <!doctype html>

    <html>

    <head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">

    <defs>

    <symbol id="icon-video" viewBox="0 0 1024 721" aria-labeledby="title">

    <title>YouTube Play Button</title>

    <path class="button" d="M1023.6,361.5c0,24.5,0.9,49-0.2,73.5c-1.7,36.6-4.7,73.1-7.3,109.6c-2,28.9-8.5,56.9-19.3,83.8 c-18.2,45.4-52.8,70.6-100,78.3c-23.1,3.8-46.7,4.9-70.1,6.1c-41.1,2.1-82.2,3.5-123.3,5c-22.1,0.8-44.3,1.1-66.4,1.5 c-42.3,0.6-84.6,1.5-126.9,1.3c-46.1-0.1-92.3-1-138.4-1.9c-36.6-0.7-73.2-1.6-109.9-3c-30.8-1.2-61.6-2.4-92.2-5 c-19-1.6-38.1-4.6-56.6-9.3c-43-11.1-71.6-38.4-86-80.7c-8.9-26-14.7-52.5-16.6-79.9c-2.5-35.4-5.8-70.7-6.7-106.1 C2.5,389.7,2.8,344.9,3.3,300c0.5-48,4-95.8,10.1-143.4c3.3-25.8,10.5-50.9,22.3-74.2c18.4-36.2,48.9-57,87.9-65 c17.2-3.5,34.9-4.9,52.5-5.9c38.2-2.2,76.5-3.9,114.7-5.2c32.9-1.2,65.9-1.7,98.9-2.3c25.6-0.5,51.3-0.8,76.9-1  c24.3-0.2,48.6-0.5,73-0.5c30.3,0.1,60.6,0.5,90.9,1c28.6,0.5,57.3,1,85.9,2c44.6,1.7,89.2,3.5,133.7,5.9 c21.2,1.1,42.7,2.1,63.2,8.2c44.1,13.2,73,41.9,87.5,85.7c8.8,26.7,14.1,54,15.9,82c2.2,34.2,5,68.4,6.5,102.7 C1024.5,313.8,1023.7,337.6,1023.6,361.5C1023.6,361.5,1023.6,361.5,1023.6,361.5z M408.2,494c92.1-47.8,183.5-95.1,275.9-143 c-92.5-48.3-183.9-96-275.9-144C408.2,303,408.2,397.9,408.2,494z"/>

    <path class="image" d="M408.2,494c0-96.1,0-191,0-287c92,48,183.4,95.7,275.9,144C591.6,398.9,500.3,446.3,408.2,494z" fill="white"/>

    </symbol>

    </defs>

    </svg>

    <style>

    .gallery-item {

    display: inline-block;

    position: relative;

    }

    svg.btn-youtube {

    display: block;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-left: -28px;

    margin-top: -20px;

    z-index: 840;

    fill: #21427B;

    fill-opacity: 0.85;

    color: white;

    width: 55px;

    height: 40px;

    }

    svg.btn-youtube:hover {

    fill: #CC181E;

    fill-opacity: 1;

    }

    svg .image {

    fill: currentColor;

    }

    </style>

    </head>

    <body>

    <main class="container">

    <div class="row">

    <div class="col-md-10 col-md-offset-1">

    <div class="row">

    <div class="col-md-6 text-center ">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h2 class="panel-title">Imperitive</h2>

    </div>

    <div class="panel-body">

    <div class="row">

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

    <div class="gallery-item">

    <a href="https://www.youtube.com/watch?v=WwSJOJYIhis"> 

      <img src="https://i.ytimg.com/vi/WwSJOJYIhis/mqdefault.jpg" class="img-responsive"> 

      <svg class="btn-youtube"><use xlink:href="#icon-video"></use></svg> 

      </a>

    </div>

    </div>

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

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim esse consequatur dolor ab earum voluptas ipsa, consequuntur culpa praesentium hic. Ratione praesentium fuga incidunt, beatae veritatis soluta? Enim, accusantium sapiente.</p>

    </div>

    </div>

    </div>

    </div>

    </div>

    <div class="col-md-6 text-center">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h2 class="panel-title">Heading</h2>

    </div>

    <div class="panel-body">

    <div class="row">

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

    <div class="gallery-item">

    <a href="https://www.youtube.com/watch?v=2FLimwTryE4"> 

      <img src="https://i.ytimg.com/vi/2FLimwTryE4/mqdefault.jpg" class="img-responsive"> 

      <svg class="btn-youtube"><use xlink:href="#icon-video"></use></svg> 

      </a>

    </div>

    </div>

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

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam totam id porro, laboriosam provident numquam voluptatem laborum recusandae officia sed explicabo perspiciatis reiciendis quas rem illo ratione exercitationem atque, maxime.</p>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </div>

    </main>

    <div class="modal fade" id="mediaModal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog">

    <div class="modal-content">

    <div class="modal-body"> </div>

    </div>

    </div>

    </div>

    <script>

    jQuery( document ).ready( function ( $ ) {

    // jQuery Query Parser 

    ( function ( $ ) {

    // encapsulate variables that need only be defined once 

    var pl = /\+/g, // Regex for replacing addition symbol with a space 

    searchStrict = /([^&=]+)=+([^&]*)/g,

    searchTolerant = /([^&=]+)=?([^&]*)/g,

    decode = function ( s ) {

    return decodeURIComponent( s.replace( pl, " " ) );

    };

    // parses a query string. by default, will only match good k/v pairs. 

    // if the tolerant option is truthy, then it will also set keys without values to '' 

    $.parseQuery = function ( query, options ) {

    var match,

    o = {},

    opts = options || {},

    search = opts.tolerant ? searchTolerant : searchStrict;

    if ( '?' === query.substring( 0, 1 ) ) {

    query = query.substring( 1 );

    }

    // each match is a query parameter, add them to the object 

    while ( match = search.exec( query ) ) {

    o[ decode( match[ 1 ] ) ] = decode( match[ 2 ] );

    }

    return o;

    }

    // parse this URLs query string 

    $.getQuery = function ( options ) {

    return $.parseQuery( window.location.search, options );

    }

    $.fn.parseQuery = function ( options ) {

    return $.parseQuery( $( this ).serialize(), options );

    };

    }( jQuery ) );

    // BOOTSTRAP 3.0 - Open YouTube Video Dynamicaly in Modal Window 

    // Modal Window for dynamically opening videos 

    $( 'a[href^="https://www.youtube.com"]' ).on( 'click', function ( e ) {

    // Store the query string variables and values 

    // Uses "jQuery Query Parser" plugin, to allow for various URL formats (could have extra parameters) 

    var queryString = $( this ).attr( 'href' ).slice( $( this ).attr( 'href' ).indexOf( '?' ) + 1 );

    var queryVars = $.parseQuery( queryString );

    // Remove sticky hover evenet 

    var el = this;

    var par = el.parentNode;

    var next = el.nextSibling;

    par.removeChild( el );

    setTimeout( function () {

    par.insertBefore( el, next );

    }, 0 )

    // if GET variable "v" exists. This is the Youtube Video ID 

    if ( 'v' in queryVars ) {

    // Prevent opening of external page 

    e.preventDefault();

    // Calculate default iFrame embed size based on current window size 

    // (these will only be used if data attributes are not specified) 

    if ( $( window ).height() < $( window ).width() ) {

    var vidHeight = $( window ).height() * 0.7;

    var vidWidth = vidHeight * 1.77777;

    } else {

    var vidWidth = $( window ).width() * 0.9;

    var vidHeight = vidWidth / 1.77777;

    }

    if ( $( this ).attr( 'data-width' ) ) {

    vidWidth = parseInt( $( this ).attr( 'data-width' ) );

    }

    if ( $( this ).attr( 'data-height' ) ) {

    vidHeight = parseInt( $( this ).attr( 'data-height' ) );

    }

    var iFrameCode = '<iframe width="' + vidWidth + '" height="' + vidHeight + '" scrolling="no" allowtransparency="true" allowfullscreen="true" src="https://www.youtube.com/embed/' + queryVars[ 'v' ] + '?autoplay=1&rel=0&wmode=transparent&showinfo=0" frameborder="0"></iframe>';

    // Replace Modal HTML with iFrame Embed 

    $( '#mediaModal .modal-body' ).html( iFrameCode );

    // Set new width of modal window, based on dynamic video content 

    $( '#mediaModal' ).on( 'show.bs.modal', function () {

    // Add video width to left and right padding, to get new width of modal window 

    var modalBody = $( this ).find( '.modal-body' );

    var modalDialog = $( this ).find( '.modal-dialog' );

    var newModalWidth = vidWidth + parseInt( modalBody.css( "padding-left" ) ) + parseInt( modalBody.css( "padding-right" ) );

    newModalWidth += parseInt( modalDialog.css( "padding-left" ) ) + parseInt( modalDialog.css( "padding-right" ) );

    newModalWidth += 'px';

    // Set width of modal (Bootstrap 3.0) 

    $( this ).find( '.modal-dialog' ).css( 'width', newModalWidth );

    } );

    // Open Modal 

    $( '#mediaModal' ).modal();

    }

    } );

    // Clear modal contents on close. 

    // There was mention of videos that kept playing in the background. 

    $( '#mediaModal' ).on( 'hidden.bs.modal', function () {

    $( '#mediaModal .modal-body' ).html( '' );

    } );

    } );

    </script>

    </body>

    </html>

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    christineavatar
    christineavatarAuthor
    Legend
    December 26, 2017

    I am absolutely stumped! I have tried every variation offered to me and I still get transferred off my site and on to youtube. It shouldn't be this difficult so there is something I am missing. When I put in the 'head' it told me that it couldn't make sense of it, turned the number red until I turned it back to what I had.  What am I doing wrong?

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 27, 2017

    Let us see your code.

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 24, 2017

    Also look at the latest jQuery Fancybox plugin.   It's touch enabled, responsive and it works with YouTube, Vimeo, Google Maps, Instagram and others...

    Nancy

    Nancy O'Shea— Product User & Community Expert
    christineavatar
    christineavatarAuthor
    Legend
    December 26, 2017

    I have tried the fancyBox lightbox script and I get a red indicator that "special characters must be escaped :[<]. I cannot find anything that is 'unescaped'

          <td width="33%"><a data-fancybox href="https://www.youtube.com/watch?v=WwSJOJYIhis">Imperitive</a></td>

    any suggestions?

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 26, 2017

    It could be something higher up in your code like an un-closed tag. 

    Nancy O'Shea— Product User & Community Expert
    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    December 24, 2017

    Have a look at Modal dialog with a YouTube player · GitHub

    If you use Bootstrap, have a look at this answer Re: Embed multiple YouTube videos on a single DW webpage

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    christineavatar
    christineavatarAuthor
    Legend
    December 26, 2017

    The bootstrap instructions boggled my mind.

    The Modal dialog stopped making sense after I did everything the Adobe Video said to do but it had nothing that showed me how to put it in my document. I need to know how to get it on to my web site.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 26, 2017

    Are you using Bootstrap to build your web site?  If yes, fine.  You can insert the modal component.  But if you're not already using Bootstrap, there's no sense bringing out the big guns just for a modal window.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices