Highlighted

Make Dreamweaver launch a new window

Enthusiast ,
Dec 23, 2017

Copy link to clipboard

Copied

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?

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.

Views

936

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

Make Dreamweaver launch a new window

Enthusiast ,
Dec 23, 2017

Copy link to clipboard

Copied

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?

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.

Views

937

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
Dec 23, 2017 0
Adobe Community Professional ,
Dec 23, 2017

Copy link to clipboard

Copied

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


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...
Dec 23, 2017 1
Enthusiast ,
Dec 26, 2017

Copy link to clipboard

Copied

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.

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...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 26, 2017

Copy link to clipboard

Copied

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, 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...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 24, 2017

Copy link to clipboard

Copied

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, 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...
Dec 24, 2017 1
Enthusiast ,
Dec 26, 2017

Copy link to clipboard

Copied

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?

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...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 26, 2017

Copy link to clipboard

Copied

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

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...
Dec 26, 2017 0
Enthusiast ,
Dec 26, 2017

Copy link to clipboard

Copied

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?

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...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 26, 2017

Copy link to clipboard

Copied

Let us see your code.

Nancy

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...
Dec 26, 2017 0
LEGEND ,
Dec 27, 2017

Copy link to clipboard

Copied

christineavatar  wrote

I am absolutely stumped!

You have some good feedback. Below would be my preffered solution - to use simple data-attributes for the video urls and pass them to the modal window, depending on which video is clicked on, the code is fully responsive:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Youtube Modal Window</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

$(document).ready(function(){

$('#page-overlay, #lightbox-wrapper').hide();

$('.video_thumb').click(function(){

var video = $(this).attr('video_url');

$('.append-content').html(' <iframe width="420" height="315" src="' + video + '"></iframe> ');

$('#page-overlay').fadeIn();

$('#lightbox-wrapper').slideDown();

});

$('.close-lightbox, #page-overlay').css('cursor','pointer').click(function() {

$('#page-overlay').fadeOut();

$('#lightbox-wrapper').slideUp();

});

});

</script>

<style>

body, html {

height: 100%;

padding: 0px;

margin: 0px;

}

img {

max-width: 100%;

height: auto;

display: block;

}

/* VIDEO WRAPPER */

.video_wrapper {

display: flex;

flex-wrap: wrap;

width: 90%;

margin: 0 auto;

}

/* VIDEO THUMBS */

.video_thumb {

width: 22%;

margin: 0 1.5% 30px 1.5%;

}

@media only screen and (max-width : 920px) {

.video_thumb {

width: 30.33%;

}

}

@media only screen and (max-width : 768px) {

.video_thumb {

width: 46.5%;

}

}

@media only screen and (max-width : 480px) {

.video_thumb {

width: 100%;

margin: 0 0 30px 0;

}

}

/* LIGHTBOX CSS */

#page-overlay{

position:fixed;

left: 0px;

top: 0px;

height: 100%;

width:100%;

background: rgba(0, 0, 0, 0.5);

}

#lightbox-wrapper {

height: 100%;

width: 60%;

margin: 0 auto;

}

@media only screen and (max-width : 768px) {

#lightbox-wrapper {

width: 80%;

}

}

#lightbox-wrapper .lightbox-content {

position: relative;

top: 50%;

transform: translateY(-50%);

background-color: #fff;

text-align: center;

padding: 0;

-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

}

.close-lightbox {

position: absolute;

top: -70px;

right: 0;

padding: 5px 10px;

background-color: #000;

color: #fff;

font-size: 20px;

}

.append-content p {

padding: 0 0 10px;

margin: 0;

}

.append-content {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.append-content iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border: 0;

}

/* END LIGHTBOX CSS */

</style>

</head>

<body>

<div class="video_wrapper">

<div class="video_thumb" video_url="https://www.youtube.com/embed/WwSJOJYIhis">

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

</div>

<!-- end video_thumb -->

<div class="video_thumb" video_url="https://www.youtube.com/embed/2FLimwTryE4">

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

</div>

<!-- end video_thumb -->

<div class="video_thumb" video_url="https://www.youtube.com/embed/WwSJOJYIhis">

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

</div>

<!-- end video_thumb -->

<div class="video_thumb" video_url="https://www.youtube.com/embed/2FLimwTryE4">

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

</div>

<!-- end video_thumb -->

<div class="video_thumb" video_url="https://www.youtube.com/embed/WwSJOJYIhis">

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

</div>

<!-- end video_thumb -->

<div class="video_thumb" video_url="https://www.youtube.com/embed/2FLimwTryE4">

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

</div>

<!-- end video_thumb -->

</div>

<!-- end video_wrapper -->

<!-- modal window -->

<div id="page-overlay">

<div id="lightbox-wrapper">

<div class="lightbox-content">

<div class="append-content">

</div>

<!-- end append-content -->

<p class="close-lightbox">&times;</p>

</div>

<!-- end lightbox-content -->

</div>

<!-- end lightbox-wrapper -->

</div>

<!-- end page-overlay -->

</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...
Dec 27, 2017 0
Enthusiast ,
Dec 26, 2017

Copy link to clipboard

Copied

Screen Shot 2017-12-26 at 4.56.46 PM.pngScreen Shot 2017-12-26 at 4.55.27 PM.png

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.

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...
Dec 26, 2017 0
Adobe Community Professional ,
Dec 26, 2017

Copy link to clipboard

Copied

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>


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...
Dec 26, 2017 0
Enthusiast ,
Dec 27, 2017

Copy link to clipboard

Copied

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≥

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...
Dec 27, 2017 0
LEGEND ,
Dec 27, 2017

Copy link to clipboard

Copied

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.

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...
Dec 27, 2017 1
Adobe Community Professional ,
Dec 27, 2017

Copy link to clipboard

Copied

Did you create a Playlist or Channel on YouTube yet?

With the playlist or channel ID, you could parse the XML feed with PHP code and display results on your own PHP web pages.   It might not be exactly what you hoped for but your site visitors could view the videos on your site instead of jumping off to YouTube.   See link below for details.

Parse XML Feed with PHP Code - https://alt-web.com/

NOTE:  It's been a while since I wrote that tutorial.  You'll need to change YouTube urls from http to https

Nancy

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...
Dec 27, 2017 0