How to put php content into javascript markup?

Question

I have a video gallery, and all the titles are generated by php. The lightbox for these videos, however, is customized in javascript. How can I put the php titles inside the iframe markup?

See here:

    $('.video').Lightbox({
      type: 'iframe'

      iframe: {
         markup: '<div class="lightbox_container">'+
                    '<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
                    '<div class="title"> <?php the_title();?> </div>'+
                  '</div>',
callbacks: {
    markupParse: function(template, values, item) {
     values.title = item.el.attr('title');
    }
    });

EDIT

For reference, I need the attachment title below ($attachment_data['title']) in the javascript section mentioned (the markup).

  <?php 
   $the_query = new WP_Query(array(
    'post_type' => 'attachment',
    'category_name' => 'video'
    )); 
   while ( $the_query->have_posts() ) : 
   $the_query->the_post();
  ?>
    <?php
 $attachment_data = wp_prepare_attachment_for_js( $attachment->ID );
      echo'<figure><a class="video" href="'.get_post_meta($post->ID, 'credit_url', true).'">';
      echo''.the_post_thumbnail ('medium').'';
      echo'<div class="photo-title"><h2>'.$attachment_data['title'].'</h2></div></a></figure>';?>
   <?php 
   endwhile; 
   wp_reset_postdata();
  ?>  

Answer 1

Try this:

  $('.video').Lightbox({
  type: 'iframe'

  iframe: {
     markup: '<div class="lightbox_container">'+
                '<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
                '<div class="title"> <?=the_title()?> </div>'+
              '</div>',
callbacks: {
markupParse: function(template, values, item) {
 values.title = item.el.attr('title');
}
});

Notice the use of the <?= shorthand for echo. (read more about it)