[Solved] Change Youtube embeded video location

[rcbh]

Hello,

I'm new on osclass, but this is an awesome CMS ! 

I'm having some trouble in placing my plugins, especially with the youtube embeded video plugin. How can I change it's location on the item page ?
I understood that plugins location is working with hooks (which worked with the google map plugin), but I don't know oh to use them with the videos.

Thank you for your help

[teseo]

Hi,

Where exactly you want to place it in ad view page?

Regards

[rcbh]

Hi,

I want to organise my item page like follow:
- Title + Contact information
- Video
- Description
- Pictures

Can you help me?

Thank you very much

[teseo]

***CORRECTED***

***WARNING***

This is for older version 1.2 of the plugin, for current version 2.0.0 see here.

**********************

Add this at the very bottom of bender/functions.php (take care not to leave blank lines after this):

Code: [Select]

<?php
function cust_move_youtube_item_view($item) {

    if (youtube_get_row($item['pk_i_id'])) { ?>
        <style>
             /* Responsive YouTube */
            .videowrapper {
            float: none;
            clear: both;
            width: 100%;
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 25px;
            height: 0;
            }
            .videowrapper iframe,
            .videowrapper object,
            .videowrapper embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            }
        </style>
   
        <script type="text/javascript">
            $(document).ready(function(){
                var youtubeHeader = $("h2:contains('<?php _e('Youtube video', 'youtube'); ?>')");
                var youtubeDiv = youtubeHeader.parent('div');
                $("<div></div>").attr( { 'id': 'moved_youtube' } ).insertBefore("div#description");
                $("#moved_youtube").append(youtubeDiv);
   
                // youtubeHeader.remove(); // Uncomment this line if you want "Youtube video" header removed
            });
        </script>
<?php }
}

osc_add_hook('item_detail', 'cust_move_youtube_item_view');
?>

This will not only move your Youtube block but it will make it fully responsive.

Mind this line:

// youtubeHeader.remove(); // Uncomment this line if you want "Youtube video" header removed

Regards

[rcbh]

The problem is that I don't have the same classes or ids in my item_detail.php. Here's my code :

Code: [Select]

<?php if( isset($detail['s_id']) && !empty($detail['s_id']) ) { ?>
<div>
    <h2 style="margin-top: 10px;"><?php _e('Youtube video', 'youtube') ; ?></h2>
    <iframe type="text/html" width="425" height="344" src="https://www.youtube.com/embed/<?php echo $detail['s_id']; ?>" frameborder="0"></iframe>
</div>
<?php } ?>

[teseo]

***CORRECTED***

That's because my solution worked with version 1.2 of the plugin. There have been some changes, so this is the correct code for current 2.0.0:


Add this at the very bottom of bender/functions.php (take care not to leave blank lines after this):

Code: [Select]

<?php
function cust_move_youtube_item_view($item) { 
    
    if (youtube_get_row($item['pk_i_id'])) { ?>
        <style>
            /* Responsive YouTube */
            .videowrapper {
            float: none;
            clear: both;
            width: 100%;
            position: relative;
            padding-bottom: 56.25%;
            padding-top: 0;
            height: 0;
            }
            .videowrapper iframe {
            position: absolute;
            top: 40px;
            left: 0;
            width: 100%;
            height: 100%;
            }
        </style>
       
        <script type="text/javascript">
                $(document).ready(function(){
                    var youtubeHeader = $("h2:contains('<?php _e('Youtube video', 'youtube'); ?>')");
                    var youtubeDiv = youtubeHeader.parent('div');
                    $("<div></div>").attr( { 'id': 'moved_youtube', 'class': 'videowrapper' } ).insertBefore("div#description");
                    $("#moved_youtube").append(youtubeDiv);
                    $("div#description").css('padding-top', '50px');
       
                    // youtubeHeader.remove(); // Uncomment this line if you want "Youtube video" header removed
                });
        </script>
<?php }
}

osc_add_hook('item_detail', 'cust_move_youtube_item_view');
?>

This will not only move your Youtube block but it will make it fully responsive.

Mind this line:

// youtubeHeader.remove(); // Uncomment this line if you want "Youtube video" header removed

Regards

[rcbh]

Thank you very much! It works great know!

Do you know how I could remove the video title ?

You're awesome, thank you very much !

[teseo]

You're welcome. Please add [SOLVED] to the title of this thread.

Do you know how I could remove the video title ?

Do you mean inside the Youtube video itself?

Regards

[rcbh]

Yes, the title which appears on the video. It's Just to know if it would be possible. 

[teseo]

Yes, it seems possible if you add a parameter showinfo=0. Change your item_detail.php to:

Code: [Select]

<?php if( isset($detail['s_id']) && !empty($detail['s_id']) ) { ?>
<div>
    <h2 style="margin-top: 10px;"><?php _e('Youtube video', 'youtube') ; ?></h2>
    <iframe type="text/html" width="425" height="344" src="https://www.youtube.com/embed/<?php echo $detail['s_id']; ?>?showinfo=0" frameborder="0"></iframe>
</div>
<?php } ?>

Regards

[itcafeonline]

Hi teseo, Bender Theme. It creates a huge gap between the images and description when there is NO youtube video. Can we introduce a check to eliminate the space?

[teseo]

Hi,

I see. I've corrected both versions now.

Regards

[itcafeonline]

Awesome, Thanks teseo

[fre2mansur]

how can I change location in item post.php and how to remove title?

[teseo]

Hi,

Are we still talking about Bender? Where do you want it on post/edit?

Regards