Youtube video embed in wordpress

Hey Everyone, Today I’m Going to discuss how to embed a youtube video in wordpress. In this article also cover another system to embed Responsive size video add-on wordpress youtube video, add from of outer side in a video.

Landing page/ Homepage in add full size & auto play video. If you just copy the video embed link & paste on wordpress website then this method is not the right way to embed. I want to show you the easiest way to embed the youtube videos and other cool stuff, such as autoplay responsive video on your website. They don’t need to click on play the video will start automatically. I’ll also show you how to hide the relative pop up from youtube server.

Let’s Start Now


How to Embed a Youtube Video in Responsive Design in WordPress Page & Post:-

Responsive Embed Youtube Video in Both Device


It’s easy to set up in wordpress blog & pages, But the difficult option is embedding a youtube video in wordpress with responsive design, autoplay, relate video stop showing, video play in high & low definition, start & stop time, alignment, layout, size etc.
Many times the wordpress theme is responsive even paid theme, But youtube video embed in wordpress does not shrink on a mobile & tablet device.
To solve responsive embed youtube video in wordpress, Today we will discuss in this article. This is an iframe method that allows us to add a responsive youtube video as well as customize a lot of embedding code.

Let’s Go:-

  1. Go to youtube and search a video and play now after video just bottom (Right side of like & dislike button) share button on click, then show embed tab to click & copy from iframe code 
  2. Now, Open wordpress page & post, inside page & post click on text tab and paste it.
  3. Add Div tag of HTML!     Note:- A class name is “youtube-video” fill an according to your choices word, mean is can change the class name, but also change in CSS coding.
  4. Go to appearance section and click on the editor, Choose an option style.css file, paste this CSS code on a button/any ending ( }) tag after and click on update file.
  5. Now Your youtube video is responsive in WordPress!    Note:- Next time add a youtube video in wordpress page & post same div tag. < use for don’t need to add CSS code everytime in a wordpress theme.

Div Tag is add in Code Editor in WordPress

<div class="youtube-video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/YbJOTdZBX1g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

Upload CSS Code in theme Editor in  Style.css

.youtube-video {
position:relative;
padding-bottom:60%;
padding-top:25px;
height:0;
overflow:hidden;
}

.youtube-video iframe, .youtube-video object, .youtube-video embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Embed Youtube Video Using iframe HTML Tag Features:-

Embed youtube responsive video using iframe method features
  1. Specific time to start a youtube video:-
    How many time after (seconds) into the video you want it to start. Example if you have to embed youtube video starts from 2 minute 17 seconds that is equal to 137 seconds. Now you can add ?start=137 at the end of your youtube video URL. (Src= tag end us ?start=137)
  2. Mute an embed youtube video ( Silent audio )
    I’m trying to embed a youtube responsive video with autoplay, but the visitor is disturbed by audio play on just open website. So iframe HTML tag inside use ?mute=1 to silent audio of youtube video. You can add ?mute=1 at the end of youtube URL ( add the end of src URL)
  3. Automatically on captions in embed video:-
    The caption is a great way to read content in a text in a youtube video. Youtube in using speech recognition technology algorithm to create captions for videos automatically.  Are this captions shown in embed youtube videos for use?CC_load_policy=1 to end of youtube video URL (Src url end)
  4. Autoplay:-
    If you want your website open by a visitor then youtube video can be automatically played for use ?autoplay=1. Any other cause a video to play repeatedly for using the ?loop=1, A play the initial video again & again for use loop.
  5. Remove logo from a video:-
    Modestbranding attributes are used so that can’t see the logo of youtube channel owner. An attribute value is 1 to remove a logo from embed videos.
    Note:- Some text label or logo not remove properly. Add attributes ?modestbranding=1 at the end of youtube video link url or src link end.
  6. Player controls:-
    This attribute to decided the video player is displayed or not displayed. A controls attribute value = 0 to do not display video player. If controls attribute value =1 to show the control player in video.
    ?Controls=0 (Do not display)
    ?Controls=1 (Default/Display)also add the end of youtube video url & src tab end.
  7. Keyboard control on embed video:-
    This attribute is default value is =0, that means is keyboard control is embedded. To change value =1 disabled keyboard control on youtube video keyboard control in a feature.
    a) Play/Pause
    b) Mute/Unmute
    c) Jump back/ jump ahead (10 seconds)
    d) Volume up/ down etc.

Expired Tags:-

  1. Stop related video:-
    This tag rel=0 is stopped on 25sep 2018 by youtube. If the tag rel=1 is the default for show relate video & stop for use value is rel=0.
    Currently, this iframe tag rel=0 is disabled by youtube.
  2. Remove video title & share options:-
    A 25 Sep 2018 after this parameter “showinfo” are Permanently disabled by youtube developers. This tag showinfo =0 to not display youtube video titles & Share options & showinfo=1 to show default display.
    Currently, time this tag (showinfo) disable by youtube developers.

Benefit Embed Video On WordPress:-

Benefit Embedding youtube video on wordpress


a) User satisfaction or user experience is excellent on your website.
b) Page Rank, such as bounce rate, session, time spent/ session duration is increased. The all is an effect on page rank on a search engine (Google, Bing)
c) There are some visitors, who don’t want to read an article, Just watching a video or images. Responsive video embed is an excellent option to stop such visitor on your website.
d) Embed youtube video is the best platform for a run business marketing campaign.


Doubt or Questions about Embed Youtube Video:-


Q1. Weather to download before a video is embeddable?
Ans:- No


Q2. Is your website page speed increase/ Decrease?
Ans:- NO effect, But sometimes load to show video on your website.

Q3. Can we embed any youtube channel video? If Yes, then what is a problem with copyright issue on the website?
Ans:- Yes, You can embed any youtuber channel video & No Problem with Copyright, but some youtuber have disabled the option of embedding.

Q4. I can embed Youtube video in wordpress post/page.
Ans:- Yes, Embed in both post/page.

Q5. I monetize my website with google adsense with using youtube video?
Ans:- Yes, But ads show on your article, not a show ads inside the embedding video on your website.

Q6. How can fit for both device different-2 Size? Example:- Desktop in 100% width of video & mobile device in show 40% width.
Ans:- Leave the code that you already add to make the youtube video responsive for a desktop.
Mobile in show 40% width & height for add @media only screen and (max-width:600px) { add css code from above }. Some change in width:100% to 40% & height:100 to 40% in CSS coding.

Note:- Max-width:600px mean resize the browser is 600px or less than this css coding apply.

Total
5
Shares

1 comment

  1. Definitely believe that which you stated. Your favorite justification appeared to be on thenet the easiest thing to be aware of. I say to you, I definitely get irked while people think about worries thatthey plainly do not know about. You managedto hit the nail upon the top as well as defined out the whole thing without having side-effects, people could take a signal. Will probably be back to get more.Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*