Magento 2 :Embed youtube video in modal pop up

Question

I am using a modal pop up. I want to embed a youtube video and a field to enter the code in the pop up. I ahve already dispalyed some content in the pop up.

This is my phtml file

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>
<?php if ($block->isPossibleOnepageCheckout()):?>
    <button type="button"
            data-role="proceed-to-checkout"
            id="checkout-button"
            title="<?php /* @escapeNotVerified */ echo __('Proceed to Checkout') ?>"
            class="action primary checkout<?php echo($block->isDisabled()) ? ' disabled' : ''; ?>"
            <?php if ($block->isDisabled()):?>disabled="disabled"<?php endif; ?>>
        <span><?php /* @escapeNotVerified */ echo __('Proceed to Checkout') ?></span>
    </button>
<?php endif?>

<div id="custom_popup" style="display:none;">
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('terms-conditions')->toHtml();?>
    <fieldset class="fieldset">
        <div class="field">
            <label for="terms" class="label"><span><?php echo $this->escapeHtml(__('I have read the terms and conditions')); ?></span></label>
            <div class="control">
                <input type="checkbox" name="checkbox" id="checkbox" class="checkbox" title="<?php echo $this->escapeHtml(__('Terms')); ?>">
            </div>
        </div>
    </fieldset>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Terms and Conditions',
                buttons: [{
                    text: $.mage.__('OK'),
                    class: '',
                    click: function () {
                        if($("#checkbox" ).is(':checked')){
                          window.location='<?php echo $block->getCheckoutUrl();?>';
                        } else{
                            alert("Please agree to the terms and conditions");

                        }
                    }
                }]
            };

            var popup = modal(options, $('#custom_popup'));
            $("#checkout-button").on('click',function(){ 
                $("#custom_popup").modal("openModal");
            });

        }
    );
</script>

How is it possible to do the above mentioned. Please help.

Thanks in advance.

Answer 1

You simple add your embedded code in custom_popup div.

<div id="custom_popup" style="display:none;">
    <div class="youtube-video">
        <iframe width="854" height="480" src="https://www.youtube.com/embed/UKlkIzD-Yj8" frameborder="0" allowfullscreen></iframe>
    </div>
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('terms-conditions')->toHtml();?>
    <fieldset class="fieldset">
        <div class="field">
            <label for="terms" class="label"><span><?php echo $this->escapeHtml(__('I have read the terms and conditions')); ?></span></label>
            <div class="control">
                <input type="checkbox" name="checkbox" id="checkbox" class="checkbox" title="<?php echo $this->escapeHtml(__('Terms')); ?>">
            </div>
        </div>
    </fieldset>
</div>