Move Video to top right side in Mobile phone in WordPress

Hey @honyakuservicesllp,
You can do that using CSS only.
Add the below CSS code at the bottom of customizer.css file:

@media (max-width: 768px)
#vid {
    position: absolute;
    right: 0px;
    top: 80px;
}

Article for adding custom CSS: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Hi Prabhat
Thank you so very much for helping me.
You are so nice.
Now after inserting the code below video has come to the exact correct position.

But there are two lines above and below the video on Mobile phone.
So the logo is still below.

@media (max-width: 768px)#vid {position:
VIDEO is correctly displaying here.
absolute; right: 0px; top: 80px;
Logo is here still. But the logo has to go up.
—————————————–
<?php if ( wp_is_mobile() ) : ?>
@media (max-width: 768px)
#vid {
position: absolute;
right: 0px;
top: 80px;
}
<iframe id=”ppy” width=”200″ height=”100″ src=”https://www.youtube-nocookie.com/embed/SIHu8kfWHhw?autoplay=1&controls=0&#8243; frameborder=”0″ autoplay=”autoplay” allow=”autoplay” allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

<?php endif; ?>
—————————

Hey @honyakuservicesllp,
Your website logo looks fine from my end.

Could you share a screenshot of the section you are referring to?

Also, I saw that some other unrequired CSS is applied to #vid in some viewports, which is creating some disturbance. So, you could replace the CSS code from my previous reply with the below one:

#vid {
    position: absolute;
    right: 0px;
    top: 80px;
    margin-left: 0px !important;
    margin-top: 0px !important;
}

Add the above CSS code at the bottom of customizer.css file (Appearance->Customize->Additional CSS):

Hi Prabhat
Thank you for the quick reply.
The screenshot is as below.
https://honyakuservices.com/wp-content/uploads/2020/11/Screenshot_20201126-182549.png

I wanted the logo and the video to be within the box area.

Top right yellow box is the Menu area.
Thank you in advance.

HiPrabhat
Good evening.
Thank you for the help.
I entered the below code.
————————————–
<iframe id=”#vid {
position: absolute;
right: 50px;
top: 80px;
margin-left: 0px !important;
margin-top: 0px !important;
}” width=”65″ height=”55″ src=”https://www.youtube-nocookie.com/embed/SIHu8kfWHhw?autoplay=1&controls=0&#8243; frameborder=”0″ autoplay=”autoplay” allow=”autoplay” allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
————————————–
Now the image in mobile becomes like below.
https://honyakuservices.com/wp-content/uploads/2020/11/Screenshot_20201126-185639.png
I wanted the logo to go up top blue box and video in the right side green box.

Hey @honyakuservicesllp,

`<iframe id=”#vid {
position: absolute;
right: 50px;
top: 80px;
margin-left: 0px !important;
margin-top: 0px !important;
}” width=”65″ height=”55″ src=”https://www.youtube-nocookie.com/embed/SIHu8kfWHhw?autoplay=1&controls=0″ frameborder=”0″ autoplay=”autoplay” allow=”autoplay” allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>`

The text above in the ID section is not a valid CSS code. Also the id that you have specified to the iframe tag is not in the correct format, it should be something like:

<iframe id="vid" width="65" height="55" src="https://www.youtube-nocookie.com/embed/SIHu8kfWHhw?autoplay=1&controls=0″ frameborder="0" autoplay="autoplay" allow="autoplay" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

As mentioned in my previous replies, you have to add the CSS code in Appearance->Customize->Additional CSS, section.

Another thing here to note is that the width of your logo is too big in this screen size and, if you position the video on its right side, then it will overlap the logo, resulting in disturbances in the design.

• This reply was modified 3 years, 12 months ago by Prabhat.

Hi Prabhat
Thank you for your support and help.
I have added under Appearance->Customize->Additional CSS, section as you suggested.
The logo is displayed but the video is missing.
https://honyakuservices.com/wp-content/uploads/2020/11/Screenshot_20201126-214520.png
It seems the video is under U of Honyaku.
Is there any means to display the video.

Sorry to trouble you.
———————————–
#vid {
position: absolute;
right: 0px;
top: 80px;
margin-left: 0px !important;
margin-top: 0px !important;
}
<iframe id=”vid” width=”65″ height=”55″ src=”https://www.youtube-nocookie.com/embed/SIHu8kfWHhw?autoplay=1&controls=0″ frameborder=”0″ autoplay=”autoplay” allow=”autoplay” allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
———————————–

Hey @honyakuservicesllp,
Add the below CSS code in Appearance->Customize->Additional CSS:

#vid{
  display: block !important;
}

Sorry to trouble you.

Helping others can never be trouble ??

Hi Prabhat

Thank you very much for your help.
I will make some changes into html 5 Video to let it play auto play.
Your are excellent Full stake developer.

Hey @honyakuservicesllp,
Thanks for the appreciation.

I will make some changes into html 5 Video to let it play auto play.

You can follow the below mentioned article link:
https://www.w3schools.com/tags/att_video_autoplay.asp

Hi Prabhat
Thank you so very much.

Happy to help ??

Hi Prashant
Good evening.

Would you please let me know how to add the video only in Mobile Phone display responsive at the Lower part of the mobile display.
Somewhere before or after the “About Us” section.
Sorry to bother you.
Video
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/WTxtfHzIR7k?controls=0&#8243; frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Hey @honyakuservicesllp,
A very good evening to you too ??

Could you share a screenshot of the section, highlighting the position where the video is required?

I suggest you create a new thread and share its link, as this thread was already solved. Kindly mark this thread as Resolved.

Hi Prabhat

I closed the thread and open at “Autoplay Video in Mobile Phone only”.
Thank you so much.